@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@* Make sure anonymous users have the 2sxc JS API *@
@Kit.Page.Activate("2sxc.JsCore")

@{
  var randomName = "SuperPoet " + new Random().Next(1000);
}
<table id="example-content" class="table">
  Name Birth date Poems Actions
  <tbody>
    @foreach (var poet in AsItems(App.Data["PoetsToEdit"])) {
      <tr>
        <td>@poet.Get("Name")</td>
        <td>@poet.DateTime("BirthDate").ToShortDateString()</td>
        <td data-poet="@poet.Id">@poet.Get("Poems")</td>
        <td>
          <button type="button" class="btn btn-primary" onclick="window.editPoets.updateCount(@poet.Id)">Update Poems</button>
          <button type="button" class="btn btn-primary" onclick="window.editPoets.delete(@poet.Id)">Delete Poet</button>
        </td>
      </tr>
    }
  </tbody>
</table>

<div class="row">
  <div class="col-md-3">
    <input id="name" class="form-control" placeholder="Name" value="@randomName">
  </div>
  <div class="col-md-3">
    <input type="date" id="birthdate" class="form-control" min="1938-01-01" max="1949-01-01" placeholder="Birthdate" value="2021-01-01">
  </div>
  <div class="col-md-3">
    <input type="number" id="poems" min="0" class="form-control" placeholder="Poems" value="@(new Random().Next(999))">
  </div>
  <button type="button" class="btn btn-primary" onclick="window.editPoets.add()" >Add poet</button>
</div>

@* This tutorial uses turnOn, see turnOn tutorials *@
@Kit.Page.TurnOn("window.editPoets.init()", data: new {
  moduleId = MyContext.Module.Id
})

<script src="@App.Folder.Url/tutorials/js-edit/js/edit.js"></script>

// This tutorial uses turnOn, see turnOn tutorials
// As soon as this variable exists, the page will start the code thanks to turnOn
window.editPoets = {
  poetsSvc: null,

  init: function({ moduleId }) {
    // Create a $2sxc object using the current Module Id
    const sxc = $2sxc(moduleId);

    // Get the data Service - type PoetsToEdit has public create/delete permissions
    poetsSvc = sxc.data('PoetsToEdit');
  },

  add: function() {
    const newPoet = {
      name: document.querySelector('#name').value,
      birthdate: document.querySelector('#birthdate').value,
      poems: document.querySelector('#poems').value
    };

    // Create data in the backend with .create(object) and reload page after
    poetsSvc.create(newPoet).then(() => { alert('created poet, will reload'); location.reload(); });
  },

  delete: function(id) {
    // Delete data in the backend with .delete()
    poetsSvc.delete(id).then(() => { alert('deleted poet, will reload'); location.reload(); });
  },


  updateCount: function(id) {
    // NOTE: Updated object doesn't need to contain all properties 
    const updatedPoet = {
      Poems: Math.floor(Math.random() * 100).toString()
    };

    // Update data in the backend with .update()
    poetsSvc.update(id, updatedPoet)
      // After backend update, show the new number which the backend returned
      .then(res => {
        document.querySelector(`[data-poet='${id}']`).innerText = res.Poems
      });
  }
}