/*

          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); // Or handle other response formats
          })
          .then(responseData => {
            console.log('Response received:', responseData);
            // Handle the server's response
          });

*/

document.addEventListener('DOMContentLoaded', function() {
  var todos = document.getElementsByClassName('todo_item');
  var action_items = (document.getElementById('todo_actions')).querySelectorAll('button');

  // General Modal handling
  function handle_modal(modal) {
      console.log('handling modal');
      let modal_close = modal.querySelector('.modal_close');
      let submit_button = modal.querySelector('input[type="submit"]');
      modal.style.display = 'block';

      modal_close.addEventListener('click', function() {
        modal.style.display = "none";
      });

      submit_button.addEventListener('click', function(e) {
        e.preventDefault();
        let todo = {
          'title': modal.querySelector('#title').value,
          'description': modal.querySelector('#description'),
          'priority': modal.querySelector('#priority'),
          'due_date': modal.querySelector('#due_date'),
        };

        fetch('director.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: 'ajax_id=todo&action_id=create_update_todo&todo_id=' + this.todo_id + '&todo=' + encodeURIComponent(JSON.stringify(todo)),
        })
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); // Or handle other response formats
          })
          .then(responseData => {
            console.log('Response received:', responseData);
            // Handle the server's response
          });
      });
  }

  for (let i = 0; i < action_items.length; i++) {
    let action = action_items[i];

    action.addEventListener('click', function(e) {
      e.preventDefault();

      switch (action.value) {
        case 'new':
          let new_todo_item = document.querySelector('#new_todo_item');
          handle_modal(new_todo_item);
          break;
      }
    });
  }

  for (let i = 0; i < todos.length; i++) {
    let item = todos[i];

    // Detailed todo item view via a modal
    let modal_button = item.querySelector('.modal_activation_area');
    let modal = item.querySelector('.modal');
    modal_button.addEventListener('click', () => handle_modal(modal));

    // Checkboxes & AJAX for updating the DB
    var checkbox = item.querySelector('input[type="checkbox"]');
    checkbox.todo_id = item.querySelector('input[name="todo_id"]').value;
    checkbox.is_checked = checkbox.checked;

    checkbox.addEventListener('click', function() {
      if (!this.is_checked) {
        this.is_checked = true;
        fetch('director.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: 'ajax_id=todo&action_id=status&todo_id=' + this.todo_id + '&status=completed',
        });
      } else {
        this.is_checked = false;
        fetch('director.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: 'ajax_id=todo&action_id=status&todo_id=' + this.todo_id + '&status=open',
        });
      }
    });
  }
});