{% 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" onclick="CreateEvent()">Añadir</button>
        <div class="table-responsive mt-4">
          <table class="table w-100 text-center" id="tableEvents">
            <thead>
              <tr>
                <th>Id</th>
                <th>Título</th>
                <th>Librería</th>
                <th>Tipo</th>
                <th>Inicio</th>
                <th>Artículo</th>
                <th>Imagen</th>
                <th>Aforo</th>
                <th>Plazas</th>
                <th>Estado</th>
                <th>Acciones</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'event/modal_event_form.html' %}
{% endblock content %}

{% block scripts %}
<script>
  $modal = $("#modalEventForm");
  let editorInstance = null;
  let editor;
  function resetForm() {
    $form = $modal.find('form');
    $form.find('#btnAdd').html('');
    $form.trigger('reset');
    $form.find('#id_event_id').val('');
    $form.find('input[type=checkbox]').prop('checked', false).iCheck('update');
    $form.find('#div_plazas').addClass('d-none');
    $form.find('#id_plazas').prop('required', false);
    $form.find('#id_label_image').html('Seleccionar imagen');
    $form.find("#div-image").addClass('d-none');
    $form.find('#id_link').val('');
    $form.find("#div-search-image").removeClass('d-none');
    editor.setData('');
  }

  $(document).ready(function () {
    createTableEvents();
    let $checkAforo = $("#id_aforo");
    ClassicEditor
      .create(document.querySelector('#id_description') )
      .then(newEditor => {
          editor = newEditor;
      })
      .catch(error => {
        console.error(error);
      });

    $('#datetimepicker_date').datetimepicker({
      locale: 'es',
      sideBySide: true,
      useCurrent: false,
      defaultDate: moment().hours(19).minutes(0).seconds(0),
      format: 'YYYY-MM-DD HH:mm'
    });
    $checkAforo.on('change', function (event) {
      if (this.checked) {
        $("#div_plazas").removeClass('d-none')
        $("#id_plazas").prop('required', true);
      } else {
        $("#div_plazas").addClass('d-none');
        $("#id_plazas").prop('required', false);
      }
    });
  })

  // 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);
  });

  $("#btnDeleteImage").on('click', function (e) {
    e.preventDefault();
    Swal.fire({
      title: '¿Estás seguro de eliminar la imagen?',
      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 $form = $modal.find('form');
        let data = $form.serialize();
        $.ajax({
          method: 'POST',
          url: "{% url 'AjaxDeleteImage' %}",
          data: data,
          success: function (response) {
            toastr.success(response.message);
            $form.find("#div-search-image").removeClass('d-none');
            $form.find("#div-image").addClass('d-none');
            $form.find("#id_image").val('');
            $form.find("#id_label_image").html('Seleccionar imagen');
            $table.DataTable().ajax.reload();
          },
          error: function (error) {
            toastr.error(error.responseJSON.error);
          }
        })
      }
    });
  })


  async function CreateEvent() {
    resetForm()
    $modal.modal('show');
    $modal.find('#btnAdd').html('Crear');
  }

  async function createTableEvents() {
    const url = "{% url 'AjaxEventList' %}";
    $table = $("#tableEvents");
    $table.dataTable({
      ajax: {
        url: url,
      },
      serverSide: true,
      processing: true,
      searching: true,
      lengthMenu: [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
      pageLength: 50,
      columns: [
        { data: 'event_id' },
        {
          data: 'title',
          render: $.fn.dataTable.render.ellipsis(50, true),
          createdCell: function (td, cellData, rowData, row, col) {
            $(td).addClass('text-left align-middle');
          }
        },
        { data: 'store__name' },
        { data: 'event_category__name' },
        {
          data: 'date',
          render: function (data, type, row) {
            return moment.tz(data, 'Europe/Madrid').format("YYYY-MM-DD HH:mm");
          }
        },
        {
          data: 'product__product_id',
          render: function (data, type, row) {
            if (data) {
              return `<a href="https://www.alibri.es/libro/${data}" target="_blank" style="cursor: point">${data}</a>`;
            } else {
              return '<span>Sin artículo</span>';
            }
          },
        },
        {
          data: 'image',
          render: function (data, type, row) {
            if (data && data != ' ') {
              return `<img src="{{MEDIA_URL}}${data}" alt="" style="max-width:200px">`;
            }
            return '<span>Sin imagen</span>';
          }
        },
        {
          data: 'aforo',
          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: 'plazas' },
        {
          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) {
            if(data.aforo){
              return `
              <button class="btn btn-primary btn-sm-padding" title="Editar" onclick="showEventDetail(${data.event_id})"><i class="fa fa-edit"></i></button>
              <a class="btn btn-primary btn-sm-padding" title="Reservas" href="${data.event_id}"><i class="fa fa-file"></i></a>
              <button class="btn btn-danger btn-sm-padding" title="Eliminar" onclick="deleteEvent(${data.event_id})"><i class="fa fa-trash"></i></button>
              `;
            } else {
              return `
              <button class="btn btn-primary btn-sm-padding" title="Editar" onclick="showEventDetail(${data.event_id})"><i class="fa fa-edit"></i></button>
              <button class="btn btn-danger btn-sm-padding" title="Eliminar" onclick="deleteEvent(${data.event_id})"><i class="fa fa-trash"></i></button>
              `;
            }
          }
        },
      ],
      columnDefs: [
        {
          targets: '_all',
          createdCell: function (td, cellData, rowData, row, col) {
            $(td).addClass('align-middle');
          }
        }
      ],
      paging: true,
      info: true,
      order: [[0, 'desc']],
      language: datatableLanguage(),
      dom: '<"top"lf>t<"bottom"ip><"clear">',
      buttons: []
    })
  }

  function showEventDetail(event_id) {
    let url = "{% url 'AjaxGetEvent' %}"
    $.ajax({
      url: url,
      type: 'GET',
      data: { event_id: event_id },
      success: function (response) {
        let data = response.event;
        resetForm();
        $modal.modal('show');
        let $form = $modal.find('form');
        $form.find('#btnAdd').html('Actualizar');
        if (data.image) {
          $form.find("#div-search-image").addClass('d-none');
          $form.find("#div-image").removeClass('d-none');
          $form.find("#id_image_preview").prop('src', '{{ MEDIA_URL }}' + data.image)
        }
        $form.find('#id_event_id').val(data.event_id);
        $form.find('#id_title').val(data.title);
        $form.find('#id_date').val(data.date ? moment.tz(data.date, 'Europe/Madrid').format('YYYY-MM-DD HH:mm') : null);
        $form.find('#id_description').val(data.description);
        $form.find('#id_short_description').val(data.short_description);
        $form.find('#id_product').val(data.product ? parseInt(data.product) : null);
        $form.find('#id_link').val(data.link);

        let checkbox = ["status", "aforo"]
        checkbox.forEach(element => {
          if (data[element]) {
            $form.find($(`#id_${element}`)).prop('checked', true).iCheck('update');
          }
        });

        if (data["aforo"]) {
          $form.find("#div_plazas").removeClass('d-none')
          $form.find("#id_plazas").prop('required', true);
          $form.find('#id_plazas').val(data.plazas);
        }

        let selects = ["event_category","store"]
        selects.forEach(element => {
          if (data[element]) {
            $form.find(`#id_${element} option`).each(function() {

              if ($(this).val() == data[element]) {
                $form.find(`#id_${element}`).val($(this).val());
              }
            });
          }
        });

        editor.setData(data.description);
      },
      error: function (error) {
        console.log(error);
      }
    });
  }

  function saveEvent(event){
    event.preventDefault();
    let url = "{% url 'AjaxCreateEvent' %}";
    let form = document.getElementById('formEvent');
    form.elements['description'].value = editor.getData();
    let formData = new FormData(form);
    // Incluir image
    let image = document.getElementById('id_image').files[0];
    if (image) {
      formData.append('image', image);
    }

    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function (data) {
        toastr.success(data.message)
        $modal.modal('hide');
        $table.DataTable().ajax.reload();
      },
      error: function (error) {
        console.log(error);
        toastr.error(error.responseJSON.error)
      }
    });
  }

  async function deleteEvent(event_id){
    Swal.fire({
      title: '¿Estás seguro de eliminar el evento?',
      text: "¡No podrás revertir esto!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sí, eliminarlo!'
    }).then((result) => {
      if (result.isConfirmed) {
        let url = "{% url 'AjaxDeleteEvent' %}";
        data = {
          event_id: event_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 %}