$(document).ready(function(){

  const add_message_form = $('.add_message_form');
  const btn_progress = add_message_form.find('#btn_progress');
  const btn_timer = add_message_form.find('#btn_timer');
  const btn_none = add_message_form.find('#btn_none');
  const btn_add_row = add_message_form.find('.add-row');
  const btn_del_row = add_message_form.find('.del-row');

  const div_progress = add_message_form.find('#div_progress');
  const div_timer = add_message_form.find('#div_timer');
  const div_none = add_message_form.find('#div_none');

  const hh = add_message_form.find('.hours');
  const mm = add_message_form.find('.minutes');
  const ss = add_message_form.find('.seconds');
  const sk = add_message_form.find('.schedule');

  btn_progress.on('click', (e)=> {
    e.preventDefault();
    btn_progress.removeClass('grey').addClass('discard');
    btn_timer.removeClass('discard').addClass('grey');
    btn_none.removeClass('discard').addClass('grey');

    hh.val('00');
    mm.val('00');
    ss.val('00');
    sk.val('0');

    div_timer.addClass('d-none');
    div_none.addClass('d-none');
    div_progress.removeClass('d-none');

    $('html, body').animate({scrollTop: $('body').height()}, 400);
  });

  btn_timer.on('click', (e)=> {
    e.preventDefault();
    btn_timer.removeClass('grey').addClass('discard');
    btn_progress.removeClass('discard').addClass('grey');
    btn_none.removeClass('discard').addClass('grey');

    hh.val('00');
    mm.val('00');
    ss.val('00');
    sk.val('0');

    div_progress.addClass('d-none');
    div_none.addClass('d-none');
    div_timer.removeClass('d-none');

    $('html, body').animate({scrollTop: $('body').height()}, 400);
  });

  btn_none.on('click', (e)=> {
    e.preventDefault();
    btn_none.removeClass('grey').addClass('discard');
    btn_progress.removeClass('discard').addClass('grey');
    btn_timer.removeClass('discard').addClass('grey');

    hh.val('00');
    mm.val('00');
    ss.val('00');
    sk.val('0');

    div_progress.addClass('d-none');
    div_timer.addClass('d-none');
    div_none.removeClass('d-none');

    $('html, body').animate({scrollTop: $('body').height()}, 400);
  });

  btn_add_row.on('click', (e)=> {
    e.preventDefault();
    const self = $(e.currentTarget);
    const add_message_form = $('.add_message_form');
    const actions = add_message_form.find('.actions');
    const item = actions.find('.item').first();
    const clone = item.clone();

    $(clone).find('[name="action_id[]"]').val(0);
    $(clone).find('[name="action_title[]"]').val("");
    $(clone).find('[name="action_description[]"]').val("");

    actions.append(clone);


    const btn_del_row = clone.find('.del-row');
    btn_del_row.removeAttr('disabled');
    btn_del_row.on('click', (e)=> {
      e.preventDefault();
      const self = $(e.currentTarget);
      const item = self.closest('.item');
      item.remove();
    });

  });


  btn_del_row.on('click', (e)=> {
    e.preventDefault();
    const self = $(e.currentTarget);
    const item = self.closest('.item');
    item.remove();
  });

});