{% extends 'core/base.html' %}

{% load static %}
{% block content %}
<style>
  .ck-editor__editable {
    min-height: 15em;
  }
  .btn-sm-padding {
    padding: 0.25rem 0.5rem;
  }
</style>
<div class="row">
  <div class="col-lg-12 text-right">
    <div class="card card-default">
      <div class="card-body">
        <button class="btn btn-success mb-4" onclick="CreateEventCategory()">Añadir</button>
        <div class="table-responsive">
          <table class="table w-100 text-center" id="tableEventCategory">
            <thead>
              <tr>
                <th>Id</th>
                <th>Nombre</th>
                <th>Acciones</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'event_category/modal_event_category_form.html' %}
{% endblock content %}

{% block scripts %}
<script>
  var $modal = $("#modalEventCategoryForm");
  var $table = $("#tableEventCategory");

  function resetForm() {
    $form = $modal.find('form');
    $form.find("#btnAdd").html('')
    $form.trigger('reset');
    $form.find('#id_event_category_id').val('');
  }

  $(document).ready(function () {
    createTableEventsCategory();
  })

  async function createTableEventsCategory() {
    $table.DataTable({
      ajax: {
        "url": "{% url 'AjaxEventCategoryList' %}",
      },
      processing: true,
      serverSide: true,
      columns: [
        { "data": "event_category_id" },
        { "data": "name" },
        { 
          data: null,
          render: function (data, type, row) {
            return `
            <button class="btn btn-primary btn-sm-padding" title="Editar" onclick="showEventCategoryDetail(${data.event_category_id})"><i class="fa fa-edit"></i></button>
            <button class="btn btn-danger btn-sm-padding" title="Eliminar" onclick="deleteEventCategory(event, ${data.event_category_id})"><i class="fa fa-trash"></i></button>
            `;
          }
        },
      ],
      columnDefs: [
        {targets: [0], className: "text-left", width: "5%"},
        {targets: [1], className: "text-left", width: "80%"},
      ],
      paging: true,
      info: true,
      order: [[0, 'asc']],
      language: datatableLanguage(),
      buttons: datatableButtons(),
    });
  }

  async function CreateEventCategory() {
    resetForm()
    $modal.modal('show');
    $modal.find("#btnAdd").text('Crear');
  }

  function showEventCategoryDetail(event_category_id) {
    let url = "{% url 'AjaxGetEventCategory' %}"
    $.ajax({
      url: url,
      type: 'GET',
      data: { event_category_id: event_category_id },
      success: function (response) {
        let data = response.data;
        console.log(data)
        resetForm();
        $modal.modal('show');
        let $form = $modal.find('form');
        $form.find("#btnAdd").text('Actualizar');
        $form.find('#id_event_category_id').val(data.event_category_id);
        $form.find('#id_name').val(data.name);
      },
      error: function (error) {
        console.log(error);
      }
    });
  }

  function saveEventCategory(event){
    event.preventDefault();
    let url = "{% url 'AjaxCreateEventCategory' %}";
    $.ajax({
      url: url,
      type: 'POST',
      data: data,
      success: function (response) {
        toastr.success(response.message)
        $modal.modal('hide');
        $table.DataTable().ajax.reload();

      },
      error: function (error) {
        console.log(error);
        toastr.error(error.responseJSON.error);
      }
    });
  }

  async function deleteEventCategory(event, event_category_id){
    let url = "{% url 'AjaxDeleteEventCategory' %}";
    data = {
      event_category_id: event_category_id,
      csrfmiddlewaretoken: '{{ csrf_token }}'
    }
    $.ajax({
      url: url,
      type: 'POST',
      data: data,
      success: function (response) {
        toastr.success(response.message);
        $table.DataTable().ajax.reload();
      },
      error: function (error) {
        toastr.error(error.responseJSON.error);
      }
    });

  }
  
</script>

{% endblock scripts %}