# Admin: genres (advanced)

<script>
    loadTable();    // Execute the function  loadTable() as soon as the page loads

    // Popup a dialog
    $('tbody').on('click', '.btn-delete', function () {
        // Get data attributes from td tag
        const id = $(this).closest('td').data('id');
        const name = $(this).closest('td').data('name');
        const records = $(this).closest('td').data('records');
        // Set some values for Noty
        let text = `<p>Delete the genre <b>${name}</b>?</p>`;
        let type = 'warning';
        let btnText = 'Delete genre';
        let btnClass = 'btn-success';
        // If records not 0, overwrite values for Noty
        if (records > 0) {
            text += `<p>ATTENTION: you are going to delete ${records} records at the same time!</p>`;
            btnText = `Delete genre + ${records} records`;
            btnClass = 'btn-danger';
            type = 'error';
        }
        // Show Confirm Dialog
        let modal = new Noty({
            type: type,
            text: text,
            buttons: [
                Noty.button(btnText, `btn ${btnClass}`, function () {
                    // Delete genre and close modal
                    deleteGenre(id);
                    modal.close();
                }),
                Noty.button('Cancel', 'btn btn-secondary ml-2', function () {
                    modal.close();
                })
            ]
        }).show();
    });

    // Delete a genre
    function deleteGenre(id) {
        // Delete the genre from the database
        console.log('id', id);
    }

    // Load genres with AJAX
    function loadTable() {...}
</script>

function deleteGenre(id) {
    // Delete the genre from the database
    let pars = {
        '_token': '{{ csrf_token() }}',
        '_method': 'delete'
    };
    $.post(`/admin/genres2/${id}`, pars, 'json')
        .done(function (data) {
            console.log('data', data);
            // Rebuild the table
            loadTable();
        })
        .fail(function (e) {
            console.log('error', e);
        });
}

// Delete a genre
function deleteGenre(id) {
    // Delete the genre from the database
    let pars = {
        '_token': '{{ csrf_token() }}',
        '_method': 'delete'
    };
    $.post(`/admin/genres2/${id}`, pars, 'json')
        .done(function (data) {
            console.log('data', data);
            // Show toast
            new Noty({
                type: data.type,
                text: data.text,
                // overwrite default Noty settings
                layout: 'topRight',
                timeout: 3000,
                modal: false,
            }).show();
            // Rebuild the table
            loadTable();
        })
        .fail(function (e) {
            console.log('error', e);
        });
}

let VinylShop = (function () {

    function hello() { ... }

    /**
     * Show a Noty toast.
     * @param {object} obj
     * @param {string} [obj.type='success'] - background color ('success' | 'error '| 'info' | 'warning')
     * @param {string} [obj.text='...'] - text message
     */
    function toast(obj) {
        let toastObj = obj || {};   // if no object specified, create a new empty object
        new Noty({
            layout: 'topRight',
            timeout: 3000,
            modal: false,
            type: toastObj.type || 'success',   // if no type specified, use 'success'
            text: toastObj.text || '...',       // if no text specified, use '...'
        }).show();
    }

    // Return all functions that are public available. E.g. VinylShop.hello()
    return {
        hello: hello,   // publicly available as: VinylShop.hello()
        toast: toast,   // publicly available as: VinylShop.toast()
    };
})();

// Delete a genre
function deleteGenre(id) {
    // Delete the genre from the database
    let pars = {
        '_token': '{{ csrf_token() }}',
        '_method': 'delete'
    };
    $.post(`/admin/genres2/${id}`, pars, 'json')
        .done(function (data) {
            console.log('data', data);
            // Show toast
            VinylShop.toast({
                type: data.type,    // optional because the default type is 'success'
                text: data.text,
            });
            // Rebuild the table
            loadTable();
        })
        .fail(function (e) {
            console.log('error', e);
        });
}

<script>
  loadTable();    // Execute the function  loadTable() as soon as the page loads

  // Popup a dialog
  $('tbody').on('click', '.btn-delete', function () {...});
  
  // Show the Bootstrap modal to edit a genre
  $('tbody').on('click', '.btn-edit', function () {
      // Get data attributes from td tag
      const id = $(this).closest('td').data('id');
      const name = $(this).closest('td').data('name');
      // Update the modal
      $('.modal-title').text(`Edit ${name}`);
      $('form').attr('action', `/admin/genres2/${id}`);
      $('#name').val(name);
      $('input[name="_method"]').val('put');
      // Show the modal
      $('#modal-genre').modal('show');
  });

  // Delete a genre
  function deleteGenre(id) {...}

  // Load genres with AJAX
  function loadTable() {...}
</script>

<script>
  loadTable();    // Execute the function  loadTable() as soon as the page loads

  // Popup a dialog
  $('tbody').on('click', '.btn-delete', function () {...});
  
  // Show the Bootstrap modal to edit a genre
  $('tbody').on('click', '.btn-edit', function () {...});
  
  // Submit the Bootstrap modal form with AJAX
  $('#modal-genre form').submit(function (e) {
      // Don't submit the form
      e.preventDefault();
      // Get the action property (the URL to submit)
      const action = $(this).attr('action');
      // Serialize the form and send it as a parameter with the post
      const pars = $(this).serialize();
      console.log(pars);
      // Post the data to the URL
      $.post(action, pars, 'json')
          .done(function (data) {
              console.log(data);
              // show success message
              VinylShop.toast({
                  type: data.type,
                  text: data.text
              });
              // Hide the modal
              $('#modal-genre').modal('hide');
              // Rebuild the table
              loadTable();
          })
          .fail(function (e) {
              console.log('error', e);
              // e.responseJSON.errors contains an array of all the validation errors
              console.log('error message', e.responseJSON.errors);
              // Loop over the e.responseJSON.errors array and create an ul list with all the error messages
              let msg = '<ul>';
              $.each(e.responseJSON.errors, function (key, value) {
                  msg += `<li>${value}</li>`;
              });
              msg += '</ul>';
              // show the errors
              VinylShop.toast({
                  type: 'error',
                  text: msg
              });
          });
  });

  // Delete a genre
  function deleteGenre(id) {...}

  // Load genres with AJAX
  function loadTable() {...}
</script>

<script>
  loadTable();    // Execute the function  loadTable() as soon as the page loads

  // Popup a dialog
  $('tbody').on('click', '.btn-delete', function () {...});
  
  // Show the Bootstrap modal to edit a genre
  $('tbody').on('click', '.btn-edit', function () {...});
  
  // Show the Bootstrap modal to create a new genre
  $('#btn-create').click(function () {
      // Update the modal
      $('.modal-title').text(`New genre`);
      $('form').attr('action', `/admin/genres2`);
      $('#name').val('');
      $('input[name="_method"]').val('post');
      // Show the modal
      $('#modal-genre').modal('show');
  });
  
  // Submit the Bootstrap modal form with AJAX
  $('#modal-genre form').submit(function (e) {...});

  // Delete a genre
  function deleteGenre(id) {...}

  // Load genres with AJAX
  function loadTable() {...}
</script>