{% extends 'core/base.html' %}
{% load static %}
{% block content %}

<div class="row">
  <div class="col-lg-12">
    <div class="card card-default">
      <div class="card-body">
        <div class="table-responsive mt-4">
          <table class="table w-100 text-center" id="tableCategory">
            <thead>
              <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>ID padre</th>
                <th>Estado</th>
                <th>Acciones</th>
              </tr>
            </thead>

          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% include "category/modals/edit_category.html" %}
{% endblock %}
{% block scripts %}

<script>
  var $table = $("#tableCategory");
  var $modal = $('#modalAddCategory');
  const editors = {};

  function resetFormCategory() {
    let $form = $modal.find("form");
    $form.trigger("reset");
    $form.find("#btnAdd").html('');
    $form.find("input[type=hidden]").not('[name=csrfmiddlewaretoken]').val('');
    $form.find(".d-none input").not('[name=csrfmiddlewaretoken]').val(''); 
    $form.find("input[type=checkbox]").prop("checked", false);
  }

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

  function createTableCategory() {
    $table.DataTable().destroy();
    const url = "{% url 'AjaxCategoryGetList' %}";
    const columns = [
      {
        data: "category_id"
      },
      {
        data: "descriptions.1.name" 
      },
      {
        data: "parent_id",
        render: function (data, type, row) {
          if (data) {
            return `${data}`
          } else {
            return `<i style="font-size: 24px; color:red;" class="fas fa fa-times-circle"></i>`
          }
        }
      },
      {
        data: "status",
        render: function (data, type, row) {
          if (data) {
            return `<i style="font-size: 24px; color:green;" class="fas fa fa-check-circle"></i>`
          } else {
            return `<i style="font-size: 24px; color:red;" class="fas fa fa-times-circle"></i>`
          }
        }
      },
      {
        data: null,
        render: function (data, type, row) {
          return `
                        <button class="btn btn-primary btn-sm-padding" title="Editar" onclick="showCategory(${data.category_id})"><i class="fa fa-edit"></i></button>
                        `
        }
      },
    ]
    $table.DataTable({
      ajax: {
        url: url,
        data: function (d) {
          let filterData = $("#FormFilterCategory").serialize();
          let extraData = parseQueryString(filterData);
          $.extend(d, extraData);
        }
      },
      serverSide: true,
      processing: true,
      searching: false,
      pageLength: 10,
      lengthMenu: [
        [10, 25, 50],
        [10, 25, 50],
      ],
      paging: true,
      info: true,
      order: [[0, "asc"]],
      dom: '<"top"lf>t<"bottom"ip><"clear">',
      columns: columns,
      language: datatableLanguage(),
      buttons: [],
    })
  }

  function showCategory(category_id) {
    resetFormCategory(); // Reinicia el formulario antes de rellenarlo

    let url = "{% url 'AjaxCategoryGet' %}";
    $.ajax({
        url: url,
        type: "GET",
        data: {
            category_id: category_id,
        },
        success: function (response) {
            let category = response.category;
            let descriptions = response.descriptions;
            
            // Mostrar el modal
            $modal.modal();
            $form = $modal.find("form");
            $form.find("#btnAdd").html('Actualizar');

            $("#category_name").html(descriptions[1].name);
            
            // Rellenar los campos de la categoría
            let inputs = $form.find("input, select, textarea, input[type='hidden']");
            for (let k of inputs) {
                let name = k.name;
                if (name in category) {
                    if (k.type == "checkbox") {
                        k.checked = category[name];
                    } else if (k.type == 'select-one') {
                        k.value = category[name];
                    } else {
                        k.value = category[name];
                    }
                }
            };

            // Rellenar los campos de las descripciones para cada idioma
            descriptions.forEach(function(description) {
                let language_id = description.language_id; // Suponiendo que language_id es el código de idioma
                let descriptionField = $form.find(`#id_description_${getLanguageCode(language_id)}`);
                let metaDescriptionField = $form.find(`#id_meta_description_${getLanguageCode(language_id)}`);
                let metaKeywordField = $form.find(`#id_meta_keyword_${getLanguageCode(language_id)}`);

                // Asignar los valores correspondientes
                if (descriptionField.length) {
                    descriptionField.val(description.description);
                }
                if (metaDescriptionField.length) {
                    metaDescriptionField.val(description.meta_description);
                }
                if (metaKeywordField.length) {
                    metaKeywordField.val(description.meta_keyword);
                }
            });
        },
        error: function (error) {
            console.error("Error loading category data:", error);
        }
    });
  }

  // Función auxiliar para convertir el language_id al código que usas en los ids de los inputs
  function getLanguageCode(language_id) {
      switch(language_id) {
          case 1: return 'gb';
          case 2: return 'es';
          case 3: return 'es-ca';
          case 4: return 'de';
          default: return 'es';
      }
  }


  function saveCategory(event) {
    event.preventDefault();
    let url = "{% url 'AjaxCategorySave' %}";
    let data = $('#formCategory').serializeArray();
    $.ajax({
      url: url,
      type: "POST",
      data: data,
      success: function (response) {
        if (response.error) {
          toastr.error(response.error);
          return;
        }
        toastr.success(response.message);
        $table.DataTable().ajax.reload();
        $modal.modal('hide');
      },
      error: function (response) {
        toastr.error(response.responseJSON.error);
      }
    })
  }

</script>
{% endblock scripts %}