{% extends 'TARJETAS/templates/base.html' %}
{% load static %}

{% block title %}Tarjetas{% endblock %}

{% block content %}
<!-- Estilos personalizados para diseño moderno y responsivo -->
<style>
  /* Contenedor principal de la tarjeta */
  .card-custom {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border: none;
  }

  /* Encabezado de la tarjeta con degradado suave */
  .card-custom .card-header {
    background: linear-gradient(90deg, #6cb4ee 0%, #4a89dc 100%);
    color: #ffffff;
    font-weight: 600;
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }

  .card-custom .card-header h3 {
    margin: 0;
    font-size: 1.25rem;
  }

  .card-custom .card-header .btn-add {
    background-color: #34a853;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }

  .card-custom .card-header .btn-add:hover {
    background-color: #2c8e45;
    color: #ffffff;
  }

  /* Pie de tarjeta */
  .card-custom .card-footer {
    background-color: #f0f2f5;
    color: #4a4a4a;
    font-weight: 500;
    border-top: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  /* Tabla con bordes redondeados y sombra ligera */
  .table-custom {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background-color: #ffffff;
    margin-bottom: 0; /* Evita espacio extra en móvil */
  }

  /* Encabezado de la tabla con degradado suave gris-azulado */
  .table-custom thead th {
    background: linear-gradient(120deg, #d4e3eb 0%, #e2edf5 100%);
    color: #2c3e50;
    text-transform: uppercase;
    font-size: 0.85rem;
    border: none;
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }

  /* Filas impares con gris muy tenue */
  .table-custom tbody tr:nth-child(odd) {
    background-color: #fafbfd;
  }

  /* Hover sobre filas */
  .table-custom tbody tr:hover {
    background-color: #e4e9ef !important;
  }

  /* Celdas de la tabla */
  .table-custom td {
    padding: 0.6rem 1rem;
    vertical-align: middle;
    color: #4a4a4a;
    white-space: nowrap;
  }

  /* Botones de acción en cada fila */
  .action-btns .btn {
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    margin-right: 0.2rem;
  }

  .action-btns .btn-view {
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
  }

  .action-btns .btn-view:hover {
    background-color: #2563eb;
  }

  .action-btns .btn-edit {
    background-color: #fbbf24;
    color: #ffffff;
    border: none;
  }

  .action-btns .btn-edit:hover {
    background-color: #f59e0b;
  }

  .action-btns .btn-delete {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
  }

  .action-btns .btn-delete:hover {
    background-color: #dc2626;
  }

  /* Estilo para filtros en pie de tabla */
  .table-custom tfoot th {
    background-color: #f0f2f5;
    border: none;
    padding: 0.5rem 1rem;
  }

  .filterControl {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid #d1d5db;
    border-radius: 0.4rem;
    background-color: #ffffff;
    color: #2c3e50;
  }

  .filterControl::placeholder {
    color: #9ca3af;
    font-style: italic;
  }

  /* ------------------------------------------------------------ */
  /* Ajustes específicos para móviles (pantallas ≤ 575.98px)      */
  /* ------------------------------------------------------------ */
  @media (max-width: 575.98px) {
    .card-custom .card-header {
      flex-direction: column;
      align-items: flex-start;
      padding: 0.5rem 0.75rem;
    }
    .card-custom .card-header h3 {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }
    .card-custom .card-header .btn-add {
      width: 100%;
      text-align: center;
      font-size: 0.85rem;
      padding: 0.3rem 0;
    }
    .card-custom .card-footer {
      font-size: 0.8rem;
      text-align: center;
      padding: 0.5rem 0.75rem;
    }
    /* Ocultar columnas menos relevantes para ahorrar espacio */
    .table-custom thead th:nth-child(3),
    .table-custom thead th:nth-child(4) {
      display: none;
    }
    .table-custom tbody td:nth-child(3),
    .table-custom tbody td:nth-child(4) {
      display: none;
    }
    /* Reducir padding de celdas */
    .table-custom thead th,
    .table-custom td {
      padding: 0.5rem 0.75rem;
      font-size: 0.8rem;
    }
    /* Asegurar que la tabla se desplace horizontalmente si es necesario */
    .table-responsive {
      overflow-x: auto;
    }
  }
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Tarjetas</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{% url 'tarjetas:screen_dashboard' %}">Inicio</a></li>
          <li class="breadcrumb-item active">Tarjetas</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<!-- Main content -->
<section class="content">
  <div class="card card-custom">
    <div class="card-header">
      <h3 class="card-title">Listado de Tarjetas</h3>
      <button data-crud-modal-trigger="C" class="btn btn-add" type="button">
        <i class="fas fa-plus"></i> <span>Agregar</span>
      </button>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-custom table-hover align-middle nowrap" style="width: 100%;">
          <thead>
            <tr>
              <th style="width: 5%;">#</th>
              <th style="width: 20%;">Número</th>
              <th style="width: 20%;">Tipo</th>
              <th style="width: 25%;">Titular</th>
              <th style="width: 20%;">Propietario</th>
              <th style="width: 10%;">Acciones</th>
            </tr>
          </thead>
          <tbody class="small">
            {# Se llenará vía DataTables AJAX #}
          </tbody>
          <tfoot>
            <tr>
              <th>#</th>
              <th>Número</th>
              <th>Tipo</th>
              <th>Titular</th>
              <th>Propietario</th>
              <th></th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="card-footer">
      <b>Menú</b> – Tarjetas
    </div>
  </div>
</section>
{% endblock %}

{% block modals %}
{% include 'TARJETAS/templates/modals/tarjetas.html' %}
{% endblock %}

{% block scripts %}
<script>
  $(document).ready(function () {
    const tableTarjetas = $('section.content table').DataTable({
      responsive: {
        details: {
          type: 'inline'  // Muestra los campos ocultos en una fila expandible
        }
      },
      ajax: {
        url: '{% url "tarjetas:get_tarjetas" %}',
        type: "GET",
        dataSrc: "result"
      },
      autoWidth: false,
      pageLength: 25,
      dom: 'Brftip',
      orderCellsTop: true,
      buttons: [
        { extend: 'copy', className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-copy"></i>' },
        { extend: 'excel', className: 'btn btn-success btn-sm', text: '<i class="fas fa-file-excel"></i>' },
        { extend: 'pdf', className: 'btn btn-danger btn-sm', text: '<i class="fas fa-file-pdf"></i>' },
        { extend: 'print', className: 'btn btn-info btn-sm', text: '<i class="fas fa-print"></i>' },
        { extend: 'colvis', text: '<i class="fas fa-eye"></i>', className: 'btn btn-primary btn-sm' }
      ],
      initComplete: function () {
        // Configurar filtros en el tfoot
        this.api().columns().every(function () {
          const column = this;
          const title = $(column.footer()).text().trim();
          if (title !== "Acciones" && title !== "") {
            const input = $('<input class="filterControl" type="text" placeholder="Filtrar ' + title + '" />')
              .appendTo($(column.footer()).empty())
              .on("keyup change clear", function () {
                if (column.search() !== this.value) {
                  column.search(this.value).draw();
                }
              });
          }
        });
      },
      columnDefs: [
        // Prioridades de responsividad: 
        { targets: 0, responsivePriority: 1 },  // Índice siempre visible
        { targets: 1, responsivePriority: 2 },  // Número
        { targets: 2, responsivePriority: 4 },  // Tipo (oculto en móvil si falta espacio)
        { targets: 3, responsivePriority: 3 },  // Titular (oculto en móvil si falta espacio)
        { targets: 4, responsivePriority: 5 },  // Propietario (oculto en móvil si falta espacio)
        { targets: 5, orderable: false, responsivePriority: 1 }  // Acciones siempre visible
      ],
      columns: [
        {
          data: null,
          className: "text-center",
          render: function (data, type, row, meta) {
            return meta.row + 1;
          }
        },
        {
          data: "numero",
          render: function (data) {
            return data ? data : '<span class="text-muted"><i>N/A</i></span>';
          }
        },
        {
          data: "id_tarjeta_tipo_json",
          render: function (data) {
            return VB.tarjetas_tipos.vb(data);
          }
        },
        {
          data: "titular_nombre",
          render: function (data) {
            return data ? data : '<span class="text-muted"><i>N/A</i></span>';
          }
        },
        {
          data: null,
          render: function (data, type, row) {
            return VB.tarjetas_propietarios.vb(row);
          }
        },
        {
          data: null,
          orderable: false,
          className: "action-btns text-center",
          render: function () {
            return `
              <button data-crud-modal-trigger="R" class="btn btn-view btn-sm" title="Ver">
                <i class="fas fa-eye"></i>
              </button>
              <button data-crud-modal-trigger="U" class="btn btn-edit btn-sm" title="Editar">
                <i class="fas fa-edit"></i>
              </button>
              <button data-crud-modal-trigger="D" class="btn btn-delete btn-sm" title="Eliminar">
                <i class="fas fa-trash"></i>
              </button>
            `;
          }
        }
      ]
    });

    SET_CRUD_MODAL({
      modal_id: 'modal_tarjetas',
      verbose: VB.tarjetas.vb,
      url_save: '{% url "tarjetas:save_tarjeta" %}',
      url_delete: '{% url "tarjetas:delete_tarjeta" %}',
      rowDataOnCreate: {
        id_tarjeta_propietario_tipo: 1
      }
    });
  });
</script>
{% endblock %}