<?php defined( 'BASEPATH' ) OR exit( 'No direct script access allowed' ); ?>
<div class="content">
  <div class="contrainer px-4">
    <div class="row">
      <div class="col-sm-12">
        <div class="response-message"><?php echo alert_message(); ?></div>
      </div>
    </div>
    <div class="row justify-content-between mb-4">
      <div class="col">
        <a href="<?php echo base_url('admin/achievements_user') ?>" class="btn">
          <span class="fas fa-arrow-left mr-1"></span>
          Kembali
        </a>
      </div>
      <div class="col text-right">
        <button id="saveData" class="btn btn-info" disabled>Simpan</button>
      </div>
    </div>
    <div id="editor">
      <?php echo ( ! empty($content) ) ? $content : "" ; ?>
    </div>
  </div>
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast align-items-center text-bg-primary border-0" id="toast" role="alert" data-bs-config='{"autoHide": false}'>
    <div class="toast-body">
      Message
    </div>
  </div>
</div>

<script src="<?php echo base_url() ?>/assets/default/vendor/ckeditor/ckeditor.js"></script>
<script>
  
  (document.addEventListener("DOMContentLoaded", () => {
    const editor = document.getElementById("editor")
    const saveButton = document.getElementById("saveData")
  
    ClassicEditor.create(editor)
    .then(editor => {
      saveButton.disabled = false;
      
      saveButton.addEventListener("click", () => {
        const data = new FormData()
        data.append("content", editor.getData())
        data.append("<?php echo $this->security->get_csrf_token_name(); ?>", "<?php echo $this->security->get_csrf_hash(); ?>")
  
        fetch('<?php echo admin_action("announcement_per_user/" . $user_id . "/update"); ?>', { method: "POST", body: data })
        .then(async (response) => {
          window.alert("Data saved");
        })
        .catch(err => {
          console.error(err)
        })
      })

    })
    .catch(err => console.error(err))
    
  }))
</script>