{% extends 'core/base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
<div class="row">
  <div class="col-lg-12">
    <div class="card card-default">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <button class="btn btn-primary" onclick="resetCache()">Reset Cache</button>
          <button class="btn btn-success" onclick="createHomeLayout()">Añadir</button>
        </div>
        <form action="" id="FormFilterHomeLayout">
          <div class="row mb-4">
            {% csrf_token %}
            <div class="filter_order_four m-2">
              <label for="id_status">Librería</label>
              <select name="store_filter" class="form-control" id="store_filter">
								<option value="">-- Seleccionar librería --</option>
								{% for store in stores %}
									<option value="{{ store.store_id }}">{{ store.name }}</option>
								{% endfor %}
              </select>
            </div>
          </div>
        </form>

        <div class="table-responsive mt-4">
          <table class="table w-100 text-center" id="tableHomeLayout">
            <thead>
              <tr>
                <th>Librería ID</th>
                <th>Librería</th>
                <th>Orden</th>
                <th>Código</th>
                <th>Identificador</th>
                <th>Acciones</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% include "home_layout/modals/add_edit_home_layout.html" %}
{% endblock %}
{% block scripts %}

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

  function resetCache(){
    Swal.fire({
      title: '¿Estás seguro de resetear el cache?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sí, resetear.',
      customClass: {
        popup: 'swal2-popup-custom'
      }
    }).then((result) => {
      if (result.isConfirmed) {
        let data = {
          csrfmiddlewaretoken: get_token(),
          cache: "home_layout"
        }
        $.ajax({
          method: "POST",
          url: "{% url 'AjaxResetCache' %}",
          data: data,
          success: function (response) {
            toastr.success(response.message);
          },
          error: function (error) {
            toastr.error(error.responseJSON.error);
          }
        })
      }
    })
  }

  function resetFormHomeLayout() {
    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(''); 

  }

  $(document).ready(function () {
    createTableHomeLayout();
    updateSortOrdersLabel();
    $('#code').change(function() {
      if(this.value === "Boletin"){
        $("#divBoletin").removeClass("d-none");
        $("#divBanner").addClass("d-none");
        $("#divEvents").addClass("d-none");
        $("#divBookishSelection").addClass("d-none");
        $("#divTopVentas").addClass('d-none');
        $("#divPublisherlist").addClass('d-none');
      } else if(this.value === "Banner") {
        $("#divBanner").removeClass("d-none");
        $("#divBoletin").addClass("d-none");
        $("#divEvents").addClass("d-none");
        $("#divBookishSelection").addClass("d-none");
        $("#divTopVentas").addClass('d-none');
        $("#divPublisherlist").addClass('d-none');
      } else if(this.value === "Events") {
        $("#divBanner").addClass("d-none");
        $("#divBoletin").addClass("d-none");
        $("#divEvents").removeClass("d-none");
        $("#divBookishSelection").addClass("d-none");
        $("#divTopVentas").addClass('d-none');
        $("#divPublisherlist").addClass('d-none');
      } else if(this.value === "Bookishselection") {
        $("#divBanner").addClass("d-none");
        $("#divBoletin").addClass("d-none");
        $("#divEvents").addClass("d-none");
        $("#divBookishSelection").removeClass("d-none");
        $("#divTopVentas").addClass('d-none');
        $("#divPublisherlist").addClass('d-none');
      } else if(this.value === "Topventas") {
        $("#divBanner").addClass("d-none");
        $("#divBoletin").addClass("d-none");
        $("#divEvents").addClass("d-none");
        $("#divBookishSelection").addClass("d-none");
        $("#divTopVentas").removeClass('d-none');
        $("#divPublisherlist").addClass('d-none');
      } else if(this.value === "Publisherlist") {
        $("#divBanner").addClass("d-none");
        $("#divBoletin").addClass("d-none");
        $("#divEvents").addClass("d-none");
        $("#divBookishSelection").addClass("d-none");
        $("#divTopVentas").addClass('d-none');
        $("#divPublisherlist").removeClass('d-none');
      } else {
        $("#divBanner").addClass("d-none");
        $("#divBoletin").addClass("d-none");
        $("#divEvents").addClass("d-none");
        $("#divBookishSelection").addClass("d-none");
        $("#divTopVentas").addClass('d-none');
      }
    })
  })
  
  $("#FormFilterHomeLayout").find("input, select").on("change", function () {
    $table.DataTable().ajax.reload();
  })

  function deleteHomeLayout(id) {
    Swal.fire({
      title: '¿Estás seguro de eliminar el home layout?',
      text: "¡Tenga en cuenta que esta acción es irreversible!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sí, eliminarlo.',
      customClass: {
        popup: 'swal2-popup-custom'
      }
    }).then((result) => {
      if (result.isConfirmed) {
        let data = {
          csrfmiddlewaretoken: get_token(),
          id: id
        }
        $.ajax({
          method: "POST",
          url: "{% url 'AjaxHomeLayoutDelete' %}",
          data: data,
          success: function (response) {
            toastr.success(response.message);
            $table.DataTable().ajax.reload();
            updateSortOrdersLabel();
          },
          error: function (error) {
            toastr.error(error.responseJSON.error);
          }
        })
      }
    })
  }

  function createTableHomeLayout() {
    $table.DataTable().destroy();
    const url = "{% url 'AjaxHomeLayoutGetList' %}";
    const dataSrc = "home_layouts";
    const columns = [
      {
        data: "store_id"
      },
      {
        data: "store__name"
      },
      {
        data: "sort_order"
      },
      {
        data: "code"
      },
      {
        data: null,
        render: function (data, type, row) {
          let settings = JSON.parse(data.settings)
          console.log(settings);
          if(data.code === "Banner"){
            return settings.collection;
          } else if(data.code === "Boletin"  && settings.title.es != null){
              return settings.title.es;
          } else if(data.code === "Publisherlist"  && settings.publishers_list != null){
              return settings.publishers_list;
              
          } else if(data.code === "Boletin" || data.code === "Topventas"  || data.code === "Bookishselection"){
            if(settings.boletin_id != null){
              return settings.boletin_id;
            } else {
              return "";
            }
          } else {
            return "";
          }
        }
      },
      {
        data: null,
        render: function (data, type, row) {
          return `
                        <button class="btn btn-primary btn-sm-padding" title="Editar" onclick="showHomeLayout(${data.id})"><i class="fa fa-edit"></i></button>
                        <button class="btn btn-danger btn-sm-padding" title="Eliminar" onclick="deleteHomeLayout(${data.id})"><i class="fa fa-trash"></i></button>
                        `
        }
      },
    ]
    $table.DataTable({
      ajax: {
        url: url,
        data: function (d) {
          let filterData = $("#FormFilterHomeLayout").serialize();
          let extraData = parseQueryString(filterData);
          extraData.store_id = extraData.store_filter;
          console.log(extraData)
          $.extend(d, extraData);
          
        }
      },
      serverSide: true,
      processing: true,
      searching: true,
      pageLength: 50,
      lengthMenu: [
        [10, 25, 50],
        [10, 25, 50],
      ],
      paging: true,
      info: true,
      order: [[1, "asc"],[2, "desc"]],
      dom: '<"top"lf>t<"bottom"ip><"clear">',
      columns: columns,
      language: datatableLanguage(),
      buttons: [],
    })
  }

  function actualizarLabel(sortOrders) {
    var labelContent = "(";

    for (var i = 0; i < sortOrders.length; i++) {
        labelContent += sortOrders[i];
        if (i < sortOrders.length - 1) {
            labelContent += ", ";
        }
    }

    labelContent += ")";
  }

  function updateSortOrdersLabel() {
    $.ajax({
        url: '/home_layout/get_sort_orders_json/',
        type: 'GET',
        success: function(data) {
            actualizarLabel(data);
        },
        error: function(xhr, status, error) {
            toastr.error('Ha ocurrido un error');
        }
    });
  }

  function showHomeLayout(id) {
    resetFormHomeLayout();
    let url = "{% url 'AjaxHomeLayoutGet' %}";
    $.ajax({
      url: url,
      type: "GET",
      data: {
        id: id,
      },
      success: function (response) {
        let home_layout = response.home_layout;
        $modal.modal();
        $form = $modal.find("form");
        $form.find("#btnAdd").html('Actualizar');
        if (home_layout.code === "Boletin"){
          $form.find("#divBoletin").removeClass('d-none');
          $form.find("#divBanner").addClass('d-none');
          $form.find("#divEvents").addClass('d-none');
          $form.find("#divBookishSelection").addClass('d-none');
          $form.find("#divTopVentas").addClass('d-none');
          $form.find("#divPublisherlist").addClass('d-none');
          let settings = JSON.parse(home_layout.settings);
          $form.find("#boletin_limit").val(settings.limit);
          $form.find("#boletin_boletin_id").val(settings.boletin_id);

          if(settings.title != null){
            $form.find("#boletin_title_es").val(settings.title.es);
            $form.find("#boletin_title_ca").val(settings.title.ca);
            $form.find("#boletin_title_en").val(settings.title.en);
            $form.find("#boletin_title_de").val(settings.title.de);
          }

          if(settings.subtitle != null){
            $form.find("#boletin_subtitle_es").val(settings.subtitle.es);
            $form.find("#boletin_subtitle_ca").val(settings.subtitle.ca);
            $form.find("#boletin_subtitle_en").val(settings.subtitle.en);
            $form.find("#boletin_subtitle_de").val(settings.subtitle.de);
          }
        
        } else if (home_layout.code === "Banner"){
          $form.find("#divBanner").removeClass('d-none');
          $form.find("#divBoletin").addClass('d-none');
          $form.find("#divEvents").addClass('d-none');
          $form.find("#divBookishSelection").addClass('d-none');
          $form.find("#divTopVentas").addClass('d-none');
          $form.find("#divPublisherlist").addClass('d-none');
          let settings = JSON.parse(home_layout.settings)
          $form.find("#banner_collection").val(settings.collection);
        
        } else if (home_layout.code === "Events"){
          $form.find("#divEvents").removeClass('d-none');
          $form.find("#divBoletin").addClass('d-none');
          $form.find("#divBanner").addClass('d-none');
          $form.find("#divBookishSelection").addClass('d-none');
          $form.find("#divTopVentas").addClass('d-none');
          $form.find("#divPublisherlist").addClass('d-none');
          let settings = JSON.parse(home_layout.settings)
          $form.find("#events_limit").val(settings.limit);
        
        
        } else if (home_layout.code === "Bookishselection"){
          $form.find("#divEvents").addClass('d-none');
          $form.find("#divBoletin").addClass('d-none');
          $form.find("#divBanner").addClass('d-none');
          $form.find("#divBookishSelection").removeClass('d-none');
          $form.find("#divTopVentas").addClass('d-none');
          $form.find("#divPublisherlist").addClass('d-none');
          let settings = JSON.parse(home_layout.settings);
          $form.find("#bookishselection_boletin_id").val(settings.boletin_id);



        } else if (home_layout.code === "Topventas"){
          $form.find("#divBoletin").addClass('d-none');
          $form.find("#divBanner").addClass('d-none');
          $form.find("#divEvents").addClass('d-none');
          $form.find("#divBookishSelection").addClass('d-none');
          $form.find("#divTopVentas").removeClass('d-none');
          $form.find("#divPublisherlist").addClass('d-none');
          let settings = JSON.parse(home_layout.settings)
          $form.find("#topventas_limit").val(settings.limit);
          $form.find("#topventas_boletin_id").val(settings.boletin_id);

        } else if (home_layout.code === "Publisherlist"){
          $form.find("#divBoletin").addClass('d-none');
          $form.find("#divBanner").addClass('d-none');
          $form.find("#divEvents").addClass('d-none');
          $form.find("#divBookishSelection").addClass('d-none');
          $form.find("#divTopVentas").addClass('d-none');
          $form.find("#divPublisherlist").removeClass('d-none');
          let settings = JSON.parse(home_layout.settings)
          $form.find("#publishers_list").val(settings.publishers_list);

          
        } else{
          $form.find("#divBoletin").addClass('d-none');
          $form.find("#divBanner").addClass('d-none');
          $form.find("#divEvents").addClass('d-none');
          $form.find("#divBookishSelection").addClass('d-none');
          $form.find("#divTopVentas").addClass('d-none');
          $form.find("#divPublisherlist").addClass('d-none');
        }

        let inputs = $form.find("input, select, textarea, input[type='hidden']");
        let datepickers = ["date_start", "date_end"]
        for (k of inputs) {
          let name = k.name;
          if (name in home_layout) {
            if (datepickers.includes(name)) {
              $(k).val(moment.tz(home_layout[name], 'Europe/Madrid').format("YYYY-MM-DD"));
            } else if (k.type == "checkbox") {
              k.checked = home_layout[name];
            } else if(k.type == 'select-one') {
              k.value = home_layout[name];
            } else {
              k.value = home_layout[name];
            }
          }
        };
      },
    })
  }

  async function createHomeLayout() {
    resetFormHomeLayout()
    $modal.modal('show');
    $modal.find("#btnAdd").html('Crear');
  }


  function saveHomeLayout(event) {
    event.preventDefault();
    let url = "{% url 'AjaxHomeLayoutSave' %}";
    let data = $('#formHomeLayout').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();
        updateSortOrdersLabel();
        $modal.modal('hide');
      },
      error: function (response) {
        toastr.error(response.responseJSON.error);
      }
    })
  }

</script>
{% endblock scripts %}