{% extends 'core/base.html' %}
{% load static %}
{% block content %}
<link href="{% static 'css/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<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="createBanner()">Añadir</button>
        </div>
        <form action="" id="FormFilterBanner">
          <div class="row mb-4">
            {% csrf_token %}
            <div class="filter_order_six">
              <label for="id_status">Estado</label>
              <select name="status" class="form-control" id="id_status">
                <option value="">-- Seleccionar estado --</option>
                <option value="1">Activo</option>
                <option value="0">Desactivado</option>
              </select>
            </div>
            <div class="filter_order_six">
              <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 class="filter_order_six">
              <label for="section_filter">Sección</label>
              <select name="section_filter" class="form-control" id="section_filter">
                <option value="">-- Seleccionar sección --</option>
								<option value="home">Home</option>
								<option value="boletin">Boletin</option>
              </select>
            </div>
            <div id="divSelectHome" class="filter_order_six">
              <label for="id_collection_H">Posición</label>
              <select name="collection_H" class="form-control" id="id_collection_H">
                <option value="">-- Seleccionar posición --</option>
                {% for collection in collections %}
                <option value="{{collection}}">{{collection}}</option>
                {% endfor %}
              </select>
            </div>
            <div id="divSelectBoletin" class="filter_order_six">
              <label for="id_collection_B">Posición</label>
              <select name="collection_B" class="form-control" id="id_collection_B">
                <option value="">-- Seleccionar posición --</option>
                <option value="default">default</option>
								<option value="boletintop">boletintop</option>
								<option value="boletinbottom">boletinbottom</option>
              </select>
            </div>
          </div>
        </form>
        
        <div class="table-responsive mt-4">
          <table class="table w-100 text-center" id="tableBanner">
            <thead>
              <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Librería</th>
                <th>Sección</th>
                <th>Posiciones</th>
                <th>Orden</th>
                <th>Inicio</th>
                <th>Final</th>
                <th>Imagen</th>
                <th>Status</th>
                <th>Acciones</th>
              </tr>
            </thead>

          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% include "banners/modals/add_edit_banner.html" %}
{% endblock %}
{% block scripts %}
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{% static 'js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js' %}"></script>
<script>
  var $table = $("#tableBanner");
  var $modal = $('#modalAddBanner');
  const editors = {};

  function resetFormBanner() {
    let $form = $modal.find("form");
    $form.trigger("reset");
    $form.find("#btnAdd").html('');
    $form.find("#banner_id").val('');
    $form.find("input[type=checkbox]").prop("checked", false);
    $form.find("[id^='div-image_desktop_']").addClass('d-none').removeClass('d-flex');
    $form.find("[id^='div-search-image_']").removeClass('d-none');
    $form.find("[id^='div-image_mobile_']").addClass('d-none').removeClass('d-flex');
    $form.find("[id^='div-search-image_mobile_']").removeClass('d-none');
    $form.find("[id^='id_label_image_'").html('Seleccionar imagen');
    $form.find("[id^='id_label_image_mobile_'").html('Seleccionar imagen');
    $form.find("#collection").val('').trigger('change');
  }

  $(document).ready(function () {
    createTableBanner();
    $('#date_range').daterangepicker({
      autoUpdateInput: false,
      locale: {
        format: 'YYYY-MM-DD',
        separator: ' - ',
        applyLabel: 'Aceptar',
        cancelLabel: 'Cancelar',
        fromLabel: 'Desde',
        toLabel: 'Hasta',
        customRangeLabel: 'Rango Personalizado',
        daysOfWeek: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        firstDay: 1
      }
    });

    $('#date_range').on('apply.daterangepicker', function (ev, picker) {
      $(this).val(picker.startDate.format('YYYY-MM-DD') + ' / ' + picker.endDate.format('YYYY-MM-DD'));
    });

    $('#date_range').on('cancel.daterangepicker', function (ev, picker) {
      $(this).val('');
    });
    $('.tagsinput').tagsinput({
      tagClass: 'label label-primary'
    });
    $('#section').change(function() {
      if(this.value === "home"){
        $("#selectHome").removeClass("d-none");
        $("#selectBoletin").addClass("d-none");
        $("#selectBoletin2").addClass("d-none");
      } else if(this.value === "boletin"){
        $("#selectHome").addClass("d-none");
        $("#selectBoletin").removeClass("d-none");
        $("#selectBoletin2").removeClass("d-none");
      } else {
        $("#selectHome").addClass("d-none");
        $("#selectBoletin").addClass("d-none");
        $("#selectBoletin2").addClass("d-none");
      }
    })

    $('#section_filter').change(function() {
      if(this.value === "boletin"){
        $("#divSelectHome").addClass("d-none");
        $("#divSelectBoletin").removeClass("d-none");
      } else {
        $("#divSelectHome").removeClass("d-none");
        $("#divSelectBoletin").addClass("d-none");
      }
    })
  });

  // Archivos
  $(document).on('change', '.custom-file-input', function (e) {
    let $input = $(this);
    let $label = $input.next('.custom-file-label');
    let fileName = e.target.files[0].name;
    $label.html(fileName);
  });
  $("#FormFilterBanner").find("input, select").on("change", function () {
    $table.DataTable().ajax.reload();
  })
  
  function deleteImage(event, language, type) {
    event.preventDefault();
    let id = $modal.find("#banner_id").val();
    Swal.fire({
      title: `¿Estás seguro de eliminar la imagen ${type}?`,
      text: '¡No podrás revertir esto!',
      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(),
          banner_id: id,
          language: language,
          type: type
        }
        $.ajax({
          method: "POST",
          url: "{% url 'AjaxBannerDeleteImage' %}",
          data: data,
          success: function (response) {
            toastr.success(response.message);
            $form.find(`#div-search-image_${type}_${language}`).removeClass('d-none');
            $form.find(`#div-image_${type}_${language}`).addClass('d-none').removeClass('d-flex');
            $form.find(`#id_image_${type}_${language}`).val('');
            $form.find(`#id_label_image_${type}_${language}`).html('Seleccionar imagen');
            $table.DataTable().ajax.reload();
          },
          error: function (error) {
            toastr.error(error.responseJSON.error);
          }
        })
      }
    })
  }

  function createTableBanner() {
    $table.DataTable().destroy();
    const url = "{% url 'AjaxBannerGetList' %}";
    const dataSrc = "banners";
    const columns = [
      {
        data: "banner_id"
      },
      {
        data: "name"
      },
      {
        data: "store__name"
      },
      {
        data: "section",
      },
      {
        data: "collection"
      },
      {
        data: "sort_order"
      },
      {
        data: 'date_begin',
        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: 'get_image_default',
        render: function (data, type, row) {
          if (data) {
            return `<img style="width: auto;max-height: 40px;" src="{{MEDIA_URL}}${data}">`
          } else {
            return '<span>Sin imagen</span>';
          }
        }
      },
      {
        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="showBanner(${data.banner_id})"><i class="fa fa-edit"></i></button>
                        <button class="btn btn-danger btn-sm-padding" title="Eliminar" onclick="deleteBanner(${data.banner_id})"><i class="fa fa-trash"></i></button>
                        `
        }
      },
    ]
    $table.DataTable({
      ajax: {
        url: url,
        data: function (d) {
          let filterData = $("#FormFilterBanner").serialize();
          let extraData = parseQueryString(filterData);
          if(extraData.section_filter === "home"){
            extraData.collection = extraData.collection_H;
          } else if(extraData.section_filter === "boletin"){
            extraData.collection = extraData.collection_B;
          }
          extraData.store_id = extraData.store_filter;
          extraData.section = extraData.section_filter;
          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: [[1, "desc"]],
      dom: '<"top"lf>t<"bottom"ip><"clear">',
      columns: columns,
      language: datatableLanguage(),
      buttons: [],
    })
  }

  function showBanner(banner_id) {
    let url = "{% url 'AjaxBannerGet' %}";
    $.ajax({
      url: url,
      type: "GET",
      data: {
        banner_id: banner_id,
      },
      success: function (response) {
        let banner = response.banner;
        resetFormBanner();
        $modal.modal();
        $form = $modal.find("form");
        $form.find("#btnAdd").html('Actualizar');
        if (banner.section.includes("home")){
          $form.find("#section").val('home');
          $form.find("#collectionH").val(banner.collection);
          $("#selectHome").removeClass("d-none");
          $("#selectBoletin").addClass("d-none");
          $("#selectBoletin2").addClass("d-none");
        } else {
          $form.find("#section").val('boletin');
          $form.find("#collectionB").val(banner.collection);
          $("#selectHome").addClass("d-none");
          $("#selectBoletin").removeClass("d-none");
          $("#selectBoletin2").removeClass("d-none");
        }
        let inputs = $form.find("input, select, textarea, input[type='hidden']");
        for (k of inputs) {
          let name = k.name;
          if (name in banner) {
            if (k.type == "checkbox") {
              k.checked = banner[name];
            } else if(k.type == 'select-one') {
              if(banner[name]){
                //k.value = banner[name].toLowerCase();
                k.value = banner[name];
              } else {
                k.value = "";
              }
            } else {
              k.value = banner[name];
            }
          }
        }
        if ('date_begin' in banner && 'date_end' in banner) {
          let dateBegin = banner['date_begin'] ? moment(banner['date_begin']) : null;
          let dateEnd = banner['date_end'] ? moment(banner['date_end']) : null;
          let picker = $('#date_range').data('daterangepicker');
          if (dateBegin && dateEnd) {
            picker.setStartDate(dateBegin);
            picker.setEndDate(dateEnd);
            $('#date_range').trigger('apply.daterangepicker', picker);
          }
        }
        if ('image_banner' in banner) {
          for (let dataImage of banner['image_banner']) {
            let language = dataImage['language'];
            for (let key in dataImage) {
              if (key === 'image' && dataImage[key] != null) {
                $form.find("#div-search-image_desktop_" + language).addClass('d-none');
                $form.find("#div-image_desktop_" + language).removeClass('d-none').addClass('d-flex');
                $form.find("#id_image_preview_desktop_" + language).prop('src', '{{ MEDIA_URL }}' + dataImage[key])
              }
              else if (key === 'mobile' && dataImage[key] != null) {
                $form.find("#div-search-image_mobile_" + language).addClass('d-none');
                $form.find("#div-image_mobile_" + language).removeClass('d-none').addClass('d-flex');
                $form.find("#id_image_preview_mobile_" + language).prop('src', '{{ MEDIA_URL }}' + dataImage[key])
              }
              else {
                $form.find(`#id_${key}_${language}`).val(dataImage[key]);
              }

            }
          }
        }
      },
    })
  }

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


  function saveBanner(event) {
    event.preventDefault();
    let url = "{% url 'AjaxBannerSave' %}";
    let form = document.getElementById('formBanner');
    let formData = new FormData(form);
    // Incluir imágenes
    let languages = ['es', 'es-ca'];
    for (let language of languages) {
      let image = form.elements[`file_desktop_${language}`].files[0];
      if (image) {
        formData.append(`file_desktop_${language}`, image);
      }
      let mobile = form.elements[`file_mobile_${language}`].files[0];
      if (mobile) {
        formData.append(`file_mobile_${language}`, mobile);
      }
    }
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function (response) {
        toastr.success(response.message);
        $modal.modal('hide');
        $table.DataTable().ajax.reload();
      },
      error: function (response) {
        toastr.error(response.responseJSON.error);
      }
    })
  }

  function deleteBanner(banner_id) {
    Swal.fire({
      title: '¿Estás seguro de eliminar el banner?',
      text: "¡Se eliminarán todas las imágenes!",
      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(),
          banner_id: banner_id
        }
        $.ajax({
          method: "POST",
          url: "{% url 'AjaxBannerDelete' %}",
          data: data,
          success: function (response) {
            toastr.success(response.message);
            $table.DataTable().ajax.reload();
          },
          error: function (error) {
            toastr.error(error.responseJSON.error);
          }
        })
      }
    })
  }

  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: "banners"
        }
        $.ajax({
          method: "POST",
          url: "{% url 'AjaxResetCache' %}",
          data: data,
          success: function (response) {
            toastr.success(response.message);
          },
          error: function (error) {
            toastr.error(error.responseJSON.error);
          }
        })
      }
    })
  }
</script>
{% endblock scripts %}