// Funció que retorna una taula HTML amb informació extra (detalls) per a una fila determinada
function format(d) {

    // Declarem la variable 'observacions' per guardar la fila de taula amb les observacions de l'ESTUDI
    let observacions = "";
    // Comprovem si la propietat 'Observacions' està buida
    if (d.Observacions == "") {
        // Si està buida, no fem res (la variable 'observacions' roman buida)
    } else {
        // Si hi ha contingut, construïm una fila de taula amb el text de les observacions
        observacions =
            '<tr>' +
                '<td>Observacions:</td>' +
                '<td>' + d.Observacions + '</td>' +
            '</tr>';
    }

    // Retornem la taula HTML que conté la informació extra:
    // - Règim
    // - Modalitat
    // - Torn
    // - Titularitat
    // - Places
    // A més, s'afegeixen les observacions (si n'hi ha)
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
            '<td>Règim:</td>' +
            '<td>' + d.RÈGIM + '</td>' +
        '</tr>' +
        '<tr>' +
            '<td>Modalitat:</td>' +
            '<td>' + d.MODALITAT + '</td>' +
        '</tr>' +
        '<tr>' +
            '<td>Torn:</td>' +
            '<td>' + d.TORN + '</td>' +
        '</tr>' +
        '<tr>' +
            '<td>Titularitat:</td>' +
            '<td>' + d.TITULARITAT + '</td>' +
        '</tr>' +
        '<tr>' +
            '<td>Places:</td>' +
            '<td>' + d.PLACES + '</td>' +
        '</tr>' +
        observacions +
    '</table>';
}

// Quan el document està carregat...
$(document).ready(function() {

  // Inicialitzem la DataTable sobre la taula amb id "tabla_oferta"
  let table = $('#tabla_oferta').DataTable( {

    // Especifica l'arxiu (via AJAX) que conté un array amb les dades per omplir la taula
    "ajax": "archivopub.do?ctrl=MCRST12786ZI492972&id=492972",

    // Activem l'ordenació de columnes
    "ordering": true,

    // Configurem el scroll vertical (70% de l'alçada de la finestra) i horitzontal, i permetem la seva col·lapse
    "scrollY": '70vh',
    "scrollX": true,
    "scrollCollapse": true,

    // Desactivem la paginació
    "paging": false,
    // "searching": false,  // Aquesta línia està comentada; si es descomenta, s'evitarà la cerca

    // Canviem els textos dels elements d'interfície de DataTables (cercador i informació)
    "oLanguage": {
      "sSearch":        "Cercar",
      "sInfo":          "Resultats: _TOTAL_",
      "sInfoFiltered":  "",
      "sInfoEmpty":     "Resultats: 0",
    },

    // Definim les columnes que es mostraran a la taula
    "columns": [
      {
        // Primera columna: botó per mostrar més informació (detalls)
        "className": 'details-control',
        "orderable": false,  // No es pot ordenar per aquesta columna
        "data": null,
        "defaultContent": '',
        "render": function () {
              // Mostrem una icona de Font Awesome (més)
              return '<i class="fa fa-plus-square" aria-hidden="false"></i>';
        }
      },
      // Columnes amb la informació que es mostra a la taula
      { "data": "Nou" },         //1
      { "data": "ILLA" },       //2
      { "data": "MUNICIPI" },   //3
      { "data": "CENTRE" },     //4
      { "data": "FAMÍLIA" },    //5
      { "data": "GRAU" },       //6
      { "data": "NIVELL" },     //7
      { "data": "ESTUDI" },     //8
      { "data": "RÈGIM" },      //9
      { "data": "MODALITAT" },  //10
      { "data": "TORN" },       //11
      { "data": "TITULARITAT" } //12

    ],

    // Definim el format de les columnes mitjançant 'columnDefs'
    "columnDefs": [ 

      // Format per a la columna "ESTUDI" (target 7)
      {
        "targets": 8,
        "data": "ESTUDI",
        "render": function ( data, type, row, meta ) {
          // Afegim un enllaç al text, apuntant a 'ENLLAÇ_ESTUDI', i mostrem també el 'CODI_ESTUDI' i 'ESTUDI'
          return "<a href='" + row.ENLLAÇ_ESTUDI + "' target='_self' style='text-decoration: none;color:black;'>" + row.CODI_ESTUDI + " - " + data + "</a>";
        }
      },

      // Format per a la columna "CENTRE" (target 3)
      {
        "targets": 4,
        "data": "CENTRE",
        "render": function ( data, type, row, meta ) {
          // Afegim el tipus de centre abans del nom del centre
          return "<a href='" + row.CENTRE_WEB + "' target='_blank' style='text-decoration: none;color:black;'>" + row.CENTRE_TIPUS + ' ' + data + "</a>";
        }
      },
      // Format per a la columna 0 (botó per mostrar més informació)
      {
        "targets": 0,
        "render": function ( data, type, row, meta ) {
          // Retornem simplement el símbol "+"
          return "+";
        }
      },
      // Format per a les columnes 1, 2, 4, 5 i 6
      {
        "targets": [1, 2, 3, 5, 6, 7 ],
        "data": "Nou",  // Es pot reutilitzar qualsevol dada per defecte, ja que només es mostra el text
        "render": function ( data, type, row, meta ) {
          return data + "";
        }
      },
      // Format per a les columnes "RÈGIM", "MODALITAT", "TORN" i "TITULARITAT" (targets 8, 9, 10 i 11)
      {
        "targets": [ 9, 10, 11, 12],
        "visible": false,  // Aquestes columnes es mantenen ocultes a la vista
        "data": "RÈGIM",  // Utilitzem 'RÈGIM' per ambdues, tot i que podrien ser diferents
        "render": function ( data, type, row, meta ) {
          return data + "";
        }
      }
    ],

    // Quan la taula s'ha inicialitzat completament, afegim els select per filtrar per columna
    initComplete: function () {

      // Array amb els identificadors on es col·locaran els select per filtrar
      // La posició 0 és buida perquè la columna 0 (botó) no necessita filtre
      let columnas = ["", "", "ILLA", "MUNICIPI", "CENTRE", "FAMÍLIA", "GRAU", "NIVELL", "ESTUDI", "RÈGIM", "MODALITAT", "TORN", "TITULARITAT"];

      // Comptador que s'inicia en 1 per saltar la columna 0
      let contador = 2;

      // Bucle per afegir els select de filtre a cada columna (de la 1 a la 12)
      while(contador < 13){
        // Per cada columna seleccionada...
        this.api().columns([contador]).every(function() {
          let column = this;

          // Creem un element <select> amb una amplada de 125px
          let select = $('<select style="width:125px"><option value=""></option></select>')
            // Afegim el <select> a l'element amb l'id corresponent (del vector 'columnas')
            .appendTo($("#"+columnas[contador]))
            // Quan es produeix un canvi al select...
            .on('change', function() {
                // Obtenim el valor seleccionat escapant caràcters especials
                let val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );
                // Apliquem el filtre a la columna, amb una cerca exacta (expressió regular)
                column
                    .search(val ? '^' + val + '$' : '', true, false)
                    .draw();
            });

          // Obtenim totes les cel·les d'aquesta columna, netejem el HTML i construïm un array d'objectes
          let values = column.cells('', column[0]).render('display').toArray().map(function(d) {
              // Eliminem els enllaços HTML per obtenir el text visible
              let cleanText = d.replace(/<a\b[^>]*>/gi, '').replace(/<\/a>/gi, '');
              return { original: d, clean: cleanText };
          });

          // Filtrar els duplicats basant-nos en el text net (clean)
          let uniqueValues = [];
          values.forEach(function(item) {
              if (!uniqueValues.some(v => v.clean === item.clean)) {
                  uniqueValues.push(item);
              }
          });

          // Ordenar l'array per el camp 'clean'
          uniqueValues.sort((a, b) => a.clean.localeCompare(b.clean));

          // Afegir cada opció al <select>
          uniqueValues.forEach(function(item) {
              select.append('<option value="' + item.clean + '">' + item.original + '</option>');
          });
        });

        contador++;
      } // Fi del bucle que afegeix els select
    } // Fi de la funció initComplete

  }); // Fi de la configuració de la DataTable

  // Funció per netejar els filtres  // Funció per netejar els filtres  // Funció per netejar els filtres
  $('#clearFilters').on('click', function () {
    // Netejar els selects dels filtres
    $('select').val('').trigger('change');

    // Netejar el cercador global
    $('#tabla_oferta').DataTable().search('').columns().search('').draw();
  });
  // Funció per netejar els filtres  // Funció per netejar els filtres  // Funció per netejar els filtres


  // Afegim la funcionalitat per mostrar o amagar informació extra al clicar sobre la primera columna (detalls)
  $('#tabla_oferta tbody').on('click', 'td.details-control', function () {
    // Obtenim la fila que conté la cel·la clicada
    var tr = $(this).closest('tr');
    // Obtenim l'element <i> (icona) dins d'aquesta fila
    var tdi = tr.find("i.fa");
    // Obtenim la fila corresponent en la DataTable
    var row = table.row(tr);

    // Si la informació extra ja està mostrada...
    if (row.child.isShown()) {
      // L'amaguem i canviem l'icona a un "+" (indicant que es pot expandir)
      row.child.hide();
      tr.removeClass('shown');
      tdi.first().removeClass('fa-minus-square').addClass('fa-plus-square');
    }
    // Si la informació extra no està mostrada...
    else {
      // La mostrem (amb el contingut retornat per la funció 'format') i canviem l'icona a un "-" (indicant que es pot contraure)
      row.child(format(row.data())).show();
      tr.addClass('shown');
      tdi.first().removeClass('fa-plus-square').addClass('fa-minus-square');
    }

  }); // Fi de la funcionalitat del botó de la columna 0

}); // Fi del document.ready

// Incloem Font Awesome per a les icones (versió 4.7.0)
$( '<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">' ).appendTo( "head" );

// Incloem l'estil de DataTables amb les seves extensions
$( '<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/>' ).appendTo( "head" );

// Incloem un altre arxiu d'estils específic (personalitzat)
$( '<link rel="stylesheet" type="text/css" href="archivopub.do?ctrl=MCRST12786ZI492954&id=492954"/>' ).appendTo( "head" );