{% extends 'menu/menu_ion.html' %}
{% load static %}


{% block title %}Mis Ubicaciones{% endblock %}

{% block content %}
<ion-content>
  {% include 'ionic_refresher.html' %}

  <!-- Botón "Nuevo" -->
  <ion-grid class="ion-padding">
    <ion-row>
      <ion-col size="12" class="ion-text-right">
        <ion-button size="small" href="{% url 'mapsViewer' 0 0 %}">
          Nuevo
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- Tabla de Ubicaciones -->
  <ion-grid>
    <ion-row>
      <ion-col>
        <div class="table-responsive">
          <table id="tableMaps" class="table table-striped table-bordered mb-0 table-sm rounded-4 table-hover align-middle" style="width: 100%;">
            <thead class="table-gradient text-dark">
              <tr>
                <th>#</th>
                <th>Nombre Dirección</th>
                <th>Estado</th>
                <th>Acciones</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
{% endblock %}


{% block scripts %}
<script>
  document.addEventListener('ionViewWillEnter', () => {
    // Inicializar DataTable cuando ion-content esté listo
    let buttons = "frtlip";
    let csrfToken = "{{ csrf_token }}";
    let tableMaps = $("#tableMaps").DataTable({
      scrollX: true,
      scrollY: '400px',
      pageLength: 50,
      ajax: {
        beforeSend: function (xhr, type) {
          if (!type.crossDomain) {
            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
          }
        },
        url: `{% url 'getUbicacionesUser' %}`,
        type: "POST",
        data: { opcion: 0, csrfmiddlewaretoken: csrfToken },
      },
      dom: buttons,
      language: { url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json" },
      colReorder: { realtime: false },
      buttons: [
        { extend: 'excel', text: '<i class="fas fa-file-excel"></i>', className: 'btn btn-success' },
        { extend: 'pdf',   text: '<i class="fas fa-file-pdf"></i>',   className: 'btn btn-danger'  },
        { extend: 'print', text: '<i class="fas fa-print"></i>',     className: 'btn btn-null', orientation: 'landscape' }
      ],
      columns: [
        { data: 'id_ubicacion' },
        { data: 'nombre_ubicacion', width: '80%' },
        {
          data: "estado",
          className: 'text-center',
          render: function (data) {
            return data == 3
              ? '<span class="badge badge-pill bg-danger">Deshabilitada</span>'
              : '<span class="badge badge-pill bg-success">Activo</span>';
          }
        },
        {
          data: null,
          className: 'text-center',
          render: function (data, type, row) {
            return `
              <ion-button fill="clear" size="small" class="btnViewActual" id="btnMap" data-id="${row.id_ubicacion}" title="Visualizar en Mapa">
                <ion-icon slot="icon-only" name="public"></ion-icon>
              </ion-button>
              <ion-button fill="clear" size="small" class="btnViewActual" id="btnEdit" data-id="${row.id_ubicacion}" title="Editar">
                <ion-icon slot="icon-only" name="create"></ion-icon>
              </ion-button>
              <ion-button fill="clear" size="small" class="btnViewActual" id="btnStatus" data-id="${row.id_ubicacion}" title="Cambiar Estado">
                <ion-icon slot="icon-only" name="sync-circle"></ion-icon>
              </ion-button>
            `;
          }
        }
      ]
    });

    // Eventos de botones
    $(document).off('click', '.btnViewActual').on('click', '.btnViewActual', function () {
      let btnID = this.id;
      let maps_id = parseInt($(this).data('id'));
      if (btnID === 'btnMap') {
        window.location = "{% url 'mapsViewer' 0 0 %}".replace("0/0", `${maps_id}/1`);
      } else if (btnID === 'btnEdit') {
        window.location = "{% url 'mapsViewer' 0 0 %}".replace("0/0", `${maps_id}/0`);
      } else if (btnID === 'btnStatus') {
        showLoadingBar();
        $.post(`{% url 'maps_update_status_ubicacion' %}`, { maps_id: maps_id, csrfmiddlewaretoken: csrfToken })
         .done((data) => {
           hideLoadingBar();
           if (data.save == 1) {
             Swal.fire({
               toast: true,
               icon: 'success',
               title: 'Estado de Ubicación Actualizado!',
               position: 'top-right',
               showConfirmButton: false,
               timer: 2000,
               timerProgressBar: true
             });
             tableMaps.ajax.reload(null, false);
           }
         });
      }
    });
  });
</script>
{% endblock %}