{% 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="d-flex justify-content-between">
          <button class="btn btn-success" onclick="createCoupon()">Añadir</button>
        </div>
  
        <div class="table-responsive mt-4">
          <table class="table w-100 text-center" id="tableCoupon">
            <thead>
              <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Code</th>
                <th>Tipo</th>
                <th>Descuento</th>
                <th>Producto id</th>
                <th>Fecha inicio</th>
                <th>Fecha fin</th>
                <th>Usos Total</th>
                <th>Estado</th>
                <th>Acciones</th>
              </tr>
            </thead>

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

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

  function resetFormCoupon() {
    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);
    handle_type(false);
  }

  function handle_type(type){
    let $divDiscount = $modal.find('#div-discount');
    let $divProduct = $modal.find('#div-product');
    let $divNotSelect = $modal.find('#div-not-select');
    let $discount = $modal.find('#discount');
    let $product = $modal.find('#product_id');
    if (['P', 'S'].includes(type)) {
      $divDiscount.removeClass('d-none');
      $divProduct.addClass('d-none');
      $divNotSelect.addClass('d-none');
      $discount.attr('required', true);
      $product.attr('required', false);
    } else if (type == 'O') {
      $divDiscount.addClass('d-none');
      $divProduct.removeClass('d-none');
      $divNotSelect.addClass('d-none');
      $product.attr('required', true);
      $discount.attr('required', false);
    } else {
      $divDiscount.addClass('d-none');
      $divProduct.addClass('d-none');
      $divNotSelect.removeClass('d-none');
      $product.attr('required', false);
      $discount.attr('required', false);
    }
  }

  $(document).ready(function () {
    createTableCoupon();
    // CODE
    $('#code').keypress(function(e) {
      var char = String.fromCharCode(e.which);
      if (/[a-z]/.test(char)) {
        e.preventDefault();
        this.value += char.toUpperCase();
      } else if (/[^A-Z0-9]/.test(char)) {
        e.preventDefault();
      }
    });

    $('#code').change(function() {
      var code = $(this).val();
      var coupon_id = $('#coupon_id').val();
      $.ajax({
        url: "{% url 'AjaxGetCodeCoupon' %}",
        type: 'GET',
        data: {
          'code': code,
          'coupon_id': coupon_id
        },
        success: function(response) {
          if (response.error) {
            $('#code').addClass('is-invalid');
            $('#code').siblings('.invalid-feedback').text(response.error);
          } else {
            $('#code').removeClass('is-invalid');
            $('#code').siblings('.invalid-feedback').text('');
          }
        },
        error: function(error) {
          console.error(error);
        }
      });
    });

    // TYPE
    let $type = $('#type');
    $type.change(function() {
      let type = $type.val();
      handle_type(type);
    })
    // PRODUCT
    $('#product_id').change(function() {
      let product_id = $(this).val();
      let url = "{% url 'AjaxGetProduct' %}";
      $.ajax({
        url: url,
        type: 'GET',
        data: {
          'product_id': product_id
        },
        success: function(response) {
          if (response.error) {
            $('#product_id').addClass('is-invalid');
            $('#product_id').siblings('.invalid-feedback').text(response.error);
          } else {
            $('#product_id').removeClass('is-invalid');
            $('#product_id').siblings('.invalid-feedback').text('');
          }
        },
        error: function(error) {
          console.error(error);
        }
      });
    })

  })

  function createTableCoupon() {
    $table.DataTable().destroy();
    const url = "{% url 'AjaxCouponGetList' %}";
    const dataSrc = "coupons";
    const columns = [
      {
        data: "coupon_id"
      },
      {
        data: "name"
      },
      {
        data: "code"
      },
      {
        data: "type"
      },
      {
        data: "discount",
        render: function (data, type, row) {
          if (row['type'] == 'O') return ' - ';
          if (row['type'] == 'P') return $.fn.dataTable.render.number( ',', '.', 2, '', ' %' ).display(data); 

          return $.fn.dataTable.render.number( ',', '.', 2, '', ' €' ).display(data);
        }
      },
      {
        data: "coupon_product__product_id",
        render: function (data, type, row) {
          if (!data) return ' - ';
          return data;
        }
      },
      {
        data: 'date_start',
        render: function (data, type, row) {
          if (!data) return ' - ';
          return moment.tz(data, 'Europe/Madrid').format("YYYY-MM-DD");
        }
      },
      {
        data: 'date_end',
        render: function (data, type, row) {
          if (!data) return ' - ';
          return moment.tz(data, 'Europe/Madrid').format("YYYY-MM-DD");
        },
      },
      {
        data: "uses_total"
      },
      {
        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="showCoupon(${data.coupon_id})"><i class="fa fa-edit"></i></button>
                        `
        }
      },
    ]
    $table.DataTable({
      ajax: {
        url: url,
        data: function (d) {
          let filterData = $("#FormFilterCoupon").serialize();
          let extraData = parseQueryString(filterData);
          console.log(extraData)
          $.extend(d, extraData);
        }
      },
      serverSide: true,
      processing: true,
      searching: true,
      pageLength: 10,
      lengthMenu: [
        [10, 25, 50],
        [10, 25, 50],
      ],
      paging: true,
      info: true,
      order: [[0, "desc"]],
      dom: '<"top"lf>t<"bottom"ip><"clear">',
      columns: columns,
      language: datatableLanguage(),
      buttons: [],
    })
  }

  function showCoupon(coupon_id) {
    resetFormCoupon();
    let url = "{% url 'AjaxCouponGet' %}";
    $.ajax({
      url: url,
      type: "GET",
      data: {
        coupon_id: coupon_id,
      },
      success: function (response) {
        let coupon = response.coupon;
        // resetFormCoupon();
        $modal.modal();
        $form = $modal.find("form");
        $form.find("#btnAdd").html('Actualizar');
        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 coupon) {
            if (datepickers.includes(name)) {
              $(k).val(moment.tz(coupon[name], 'Europe/Madrid').format("YYYY-MM-DD"));
            } else if (k.type == "checkbox") {
              k.checked = coupon[name];
            } else if(k.type == 'select-one') {
              k.value = coupon[name];
            } else {
              k.value = coupon[name];
            }
          }
        };
        handle_type(coupon.type);
      },
    })
  }

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


  function saveCoupon(event) {
    event.preventDefault();
    let url = "{% url 'AjaxCouponSave' %}";
    let data = $('#formCoupon').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 %}