{% 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">
        <div class="table-responsive mt-4">
          <table class="table w-100 text-center" id="tableEventsReservation">
            <thead>
              <tr>
                <th>Fecha act.</th>
                <th>Nombre</th>
                <th>Contacto</th>
                <th>Nº plazas</th>
                <th>Estado</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<script>

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

  async function createTableEventsReservations() {
    const event_id = "{{pk}}";
    const url = "{% url 'AjaxEventReservationList' 0 %}".replace('0', event_id);
    $table = $("#tableEventsReservation");
    $table.dataTable({
      ajax: {
        url: url,
      },
      serverSide: true,
      processing: true,
      searching: true,
      lengthMenu: [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
      pageLength: 10,
      columns: [
        { data : 'date_upd'},
        { data: 'nombre' },
        { data: 'contacto' },
        { data: 'plazas' },
        {
          data: 'status',
          render: function (data, type, row) {
            if(data === 0){
              return "Por confirmar";
            } else if (data === 1) {
              return "Confirmada";
            } else {
              return "Cancelada"
            }
          }
        }
      ],
      columnDefs: [
        {
          targets: '_all',
          createdCell: function (td, cellData, rowData, row, col) {
            $(td).addClass('align-middle');
          }
        }
      ],
      paging: true,
      info: true,
      order: [[0, 'desc']],
      language: datatableLanguage(),
      dom: '<"html5buttons"B>lTfgitp',
      buttons:  [
      {
          extend: 'excelHtml5',
          text: 'Exportar como Excel',
          className: 'btn btn-primary',
          exportOptions: {
              columns: ':visible'
          }
      }
    ]
    })
  }

</script>

{% endblock scripts %}