{% extends 'shared/base.html' %}
{% load static %}


{% block extracss %}
<link href="{% static 'calender/main.css' %}" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core/main.min.js"></script>

{% endblock extracss %}

{% block breadcrumb %}
<div>
  <h1><i class="fa fa-calendar"></i> Calendário</h1>
  <p>Calendário de eventos</p>
</div>
<ul class="app-breadcrumb breadcrumb">
  <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
  <li class="breadcrumb-item"><a href="#">Calendário</a></li>
</ul>
{% endblock breadcrumb %}

{% block 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">Calendário</h5>
      </div>

    </div>
  </div>
</div>


<div class="card py-3">
  <div class="content">

    <div class="row">

      <div class="col-md-3">
        <div id="external-events">
          <h4 class="mb-4">Eventos em execução</h4>
          {% for event in events_month %}
          <div class="card mb-3 bg-light bg-light rounded-2">
            <div class="card-body">
              <h5 class="card-title">{{ event.title }}</h5>
              <p class="card-text">{{ event.description }}</p>
              <p class="card-text">{{ event.id }}</p>
              <p class="card-text">De: {{ event.start_time }}</p>
              <p class="card-text">Ate: {{ event.end_time }}</p>
            </div>
          </div>
          {% empty %}
          <p>Nenhum evento em execução encontrado</p>
          {% endfor %}
        </div>
      </div>

      <div class="col-md-9 container">
        <div id="calendar"></div>
      </div>

      <div class="modal fade show" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header bg-success bg-gradient text-white">
              <h5 class="modal-title text-white" id="exampleModalLongTitle">Adicionar novo evento</h5>
              <button id="modalClose1" type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="Close"></button>

            </div>
            <form method="post">
              {% csrf_token %}
              <div class="modal-body">
                <div class="form-group">
                  <label for="recipient-name" class="col-form-label">Título do evento:</label>
                  {{ form.title }}
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Descrição:</label>
                  {{ form.description }}
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Data de início:</label>
                  {{ form.start_time }}
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Data final:</label>
                  {{ form.end_time }}
                </div>
              </div>
              <div class="modal-footer">
                <button id="modalClose2" type="button" class="btn btn-danger">Fechar</button>
                <button type="submit" class="btn btn-primary">Salvar</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="modal fade show" id="detailModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header bg-primary">
              <h5 class="modal-title text-white" id="title_event_detail"></h5>
              <button id="modalDetailClose" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form method="">
              {% csrf_token %}
              <div class="modal-body">

                <div class="form-group">
                  <label for="message-text" class="col-form-label">Descrição:</label>
                  <p id="description_event_detail">

                  </p>
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">início:</label>
                  <p id="start_event_detail">
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Fim:</label>
                  <p id="end_event_detail">
                </div>
              </div>
              <div class="modal-footer">
                <button id="delete-event-button" data-event-id="" type="button" class="btn btn-danger">Deletar</button>
                <button id="add-to-next-week" data-event-id-week="" type="button" class="btn btn-success">Proxima
                  Semana</button>
                <button id="add-to-next-day" data-event-id-day="" type="button" class="btn btn-primary">Proximo
                  Dia</button>

              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock content %}


{% block extrascripts %}
<script src="{% static 'calender/main.js' %}"></script>
<script>
  function converterDataParaDjangoFormat(data) {
    const dataJS = new Date(data);
    const ano = dataJS.getFullYear();
    const mes = (dataJS.getMonth() + 1).toString().padStart(2, '0');
    const dia = dataJS.getDate().toString().padStart(2, '0');
    const hora = dataJS.getHours().toString().padStart(2, '0');
    const minuto = dataJS.getMinutes().toString().padStart(2, '0');
    const segundo = dataJS.getSeconds().toString().padStart(2, '0');
    const formatoDjango = `${ano}-${mes}-${dia} ${hora}:${minuto}:${segundo}`;
    return formatoDjango;
  }

  document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    var today = new Date();

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,list'
      },
      buttonText: {
        today: 'Hoje',
        month: 'Mês',
        week: 'Semana',
        day: 'Dia',
        list: 'Lista'
      },
      locale: 'pt-br', // Define o idioma como português brasileiro
      initialDate: today,
      navLinks: true,
      selectable: true,
      selectMirror: true,
      select: function (arg) {
        var modal = document.getElementById('eventModal')
        modal.style.display = 'block'
        document.getElementById('id_start_time').value = converterDataParaDjangoFormat(arg.start);
        document.getElementById('id_end_time').value = converterDataParaDjangoFormat(arg.end);
        calendar.unselect()
      },
      eventClick: function (arg) {
        var title = arg.event.title;
        var start = formatDateTime(arg.event.start);
        var end = formatDateTime(arg.event.end);
        var description = arg.event.extendedProps.description || '';
        var id = arg.event.id;

        var modalInputEnd = document.getElementById('end_event_detail');

        var modal = document.getElementById('detailModal')
        var modalTitle = document.getElementById('title_event_detail');
        var modalStart = document.getElementById('start_event_detail');
        var modalEnd = document.getElementById('end_event_detail');
        var modalDescripition = document.getElementById('description_event_detail');
        var deleteButton = document.getElementById("delete-event-button");
        var nextWeek = document.getElementById("add-to-next-week");
        var nextDay = document.getElementById("add-to-next-day");

        deleteButton.setAttribute("data-event-id", id);
        nextWeek.setAttribute("data-event-id-week", id);
        nextDay.setAttribute("data-event-id-day", id);
        modal.style.display = 'block'

        modalTitle.textContent = title;
        modalStart.textContent = start;
        modalEnd.textContent = end;
        modalDescripition.textContent = description;

        modal.style.display = 'block';
      },
      editable: true,
      dayMaxEvents: true,
      events: {{ events| safe }},
      });

  calendar.render();
    });

  const closeBtn1 = document.getElementById('modalClose1');
  const closeBtn2 = document.getElementById('modalClose2');
  const closeBtn3 = document.getElementById('modalDetailClose');
  closeBtn1.addEventListener('click', () => {
    const eventModal = document.getElementById('eventModal')
    eventModal.style.display = 'none';
  });
  closeBtn2.addEventListener('click', () => {
    const eventModal = document.getElementById('eventModal')
    eventModal.style.display = 'none';
  });
  closeBtn3.addEventListener('click', () => {
    const eventModal = document.getElementById('detailModal')
    eventModal.style.display = 'none';
  });

  function formatDateTime(dateTime) {
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short' };
    const dataFormatada = new Date(dateTime).toLocaleDateString('pt-BR', options);
    return dataFormatada;
  };

  document.getElementById('delete-event-button').addEventListener('click', function () {
    const eventId = this.getAttribute('data-event-id');
    if (confirm('Tem certeza de que deseja excluir este evento?')) {
      $.ajax({
        url: `/delete_event/${eventId}/`,
        type: 'POST',
        data: {
          csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        success: function (response) {
          alert(response.message);
          window.location.reload();
        },
        error: function (xhr, status, error) {
          alert('Erro!');
        }

      });
    }
  });

  document.getElementById('add-to-next-week').addEventListener('click', function () {
    const eventId = this.getAttribute('data-event-id-week');
    if (confirm('Tem certeza de que deseja adicionar este evento para a próxima semana?')) {
      $.ajax({
        url: `/next_week/${eventId}/`,
        type: 'POST',
        data: {
          csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        success: function (response) {
          alert(response.message);
          window.location.reload();
        },
        error: function (xhr, status, error) {
          alert('Erro!');
        }
      });
    }
  });

  document.getElementById('add-to-next-day').addEventListener('click', function () {
    const eventId = this.getAttribute('data-event-id-day');
    if (confirm('Tem certeza de que deseja adicionar este evento para o próximo dia?')) {
      $.ajax({
        url: `/next_day/${eventId}/`,
        type: 'POST',
        data: {
          csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        success: function (response) {
          alert(response.message);
          window.location.reload();
        },
        error: function (xhr, status, error) {
          alert('Erro!');
        }
      });
    }
  });
</script>


{% endblock extrascripts %}