<?php
include "conn.php";
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); // Make MySQLi throw exceptions.

        try {
            // Try Connect to the DB with new MySqli object - Params {hostname, userid, password, dbname}
            $mysqli = new mysqli($host, $user, $pass, $base);

            if($_GET["gen"]=='dama'||$_GET["gen"]=='caballero') {
                $tipo1 = " and c.genero='".$_GET["gen"]."'";
              } else {
                $tipo1 = " and c.genero='CABALLERO'"; 
              }
  
                if($_GET["tie"]=="5") {
                  $tipo2 = " AND c.suc in ('011 POL','014 SAT','045 TEZ','048 NEZ','057 COS') ";
                  $tienda = "Solo 5 tiendas";
                } else{
                  $tipo2 = "";
                  $tienda = "Todas las tiendas";
                }
  
                if($_GET["cds"]=="si") {
  
                  if($tipo2 == ""){
                    $tipo3 = "";
                  } else {
                    $tipo3 = "";
                    $tipo2 = " AND c.suc in ('011 POL','014 SAT','045 TEZ','048 NEZ','057 COS','00 CDS') ";
                  }                
                  
                  $tienda = $tienda." y Cedis ";

                } else {
  
                  $tipo3 = " AND c.suc not in ('00 CDS')";
                  $tienda = $tienda." sin Cedis ";
  
                }
                
                if($_GET["gen"]=='dama') {
                  $titulo = "DAMA";
              } elseif($_GET["gen"]=='caballero') {
                  $titulo = "CABALLERO";
              } else { 
                  $titulo = "CABALLERO";
                }

            $query = "SELECT c.genero,c.linea,LEFT(c.linea,11) AS lin
            ,IFNULL(SUM(b.meta_piso),0) AS meta_piso
            ,IFNULL(SUM(b.meta_bodega),0) AS meta_bodega 
            ,IFNULL(SUM(b.meta_cedis_calc),0) AS meta_cedis 
            ,IFNULL(SUM(b.meta_piso),0)+IFNULL(SUM(b.meta_bodega),0)+IFNULL(SUM(b.meta_cedis_calc),0) AS meta_total         
            ,SUM(c.articulos_entallados) AS ent_piso
            ,0 AS ent_bodega
            ,IFNULL(ce.articulos_entallados,0) AS ent_cedis
            ,SUM(c.articulos_entallados)+0+IFNULL(ce.articulos_entallados,0) AS ent_total
            ,SUM(c.articulos_picos) AS picos_total
            ,SUM(c.articulos_entallados)+0+SUM(c.articulos_picos) AS tot_lotes
            ,SUM(i.articulos_entallados)+SUM(i.articulos_picos) AS tot_lotes_loti
            ,SUM(i.articulos_entallados)+IFNULL(ce.articulos_entallados,0) AS ent_loti 
            ,SUM(c.articulos_unitalla) AS articulos_unitalla
            ,ROUND(( IFNULL(ROUND((10* ( SUM(i.articulos_entallados) + 0 + IFNULL(ce.articulos_entallados,0)) )/(IFNULL(SUM(b.meta_piso),0)+IFNULL(SUM(b.meta_bodega),0)+IFNULL(SUM(b.meta_cedis_calc),0))),0) )) AS porc_loti_meta
            ,SUM(i.articulos_entallados)+IFNULL(ce.articulos_entallados,0)-SUM(c.articulos_entallados) AS dif_loti
            ,SUM(i.articulos_picos) AS picos_loti
            ,SUM(i.articulos_picos)-SUM(c.articulos_picos) AS dif_picos
            ,IFNULL(SUM(b.meta_piso),0)+IFNULL(SUM(b.meta_bodega),0)+IFNULL(SUM(b.meta_cedis_calc),0) - IFNULL(SUM(i.articulos_entallados),0) + 0 - IFNULL(ce.articulos_entallados,0) AS compra_lotes
            ,CONCAT(FORMAT(SUM(c.articulos_entallados),0),' --> ',ROUND(100*SUM(c.articulos_entallados)/(SUM(c.articulos_entallados)+SUM(c.articulos_picos))),'%') AS entallados
            ,CONCAT(FORMAT(SUM(c.articulos_picos),0),' --> ',ROUND(100*SUM(c.articulos_picos)/(SUM(c.articulos_entallados)+SUM(c.articulos_picos))),'%') AS picos
            FROM tienda_entallado c 
            INNER JOIN tienda_entallado_loti i
            ON c.fecha=i.fecha AND c.suc=i.suc AND c.genero=i.genero AND c.linea=i.linea
            LEFT JOIN tienda_entallado ce
            ON ce.fecha=i.fecha AND ce.suc='00 CDS' AND ce.genero=i.genero AND ce.linea=i.linea
            LEFT JOIN metas2 b ON b.tienda=c.suc AND b.genero=c.genero AND b.linea=c.linea
            WHERE c.linea<>'' AND c.fecha=CURDATE() ".$tipo1.$tipo2.$tipo3." 
            #AND c.articulos_entallados <> i.articulos_entallados
            GROUP BY 1,2
            UNION
            SELECT 'TOTAL' AS genero,'' AS linea,LEFT(c.linea,11) AS lin
            ,IFNULL(SUM(b.meta_piso),0) AS meta_piso
            ,IFNULL(SUM(b.meta_bodega),0) AS meta_bodega 
            ,IFNULL(SUM(b.meta_cedis_calc),0) AS meta_cedis 
            ,IFNULL(SUM(b.meta_piso),0)+IFNULL(SUM(b.meta_bodega),0)+IFNULL(SUM(b.meta_cedis_calc),0) AS meta_total         
            ,SUM(c.articulos_entallados) AS ent_piso
            ,0 AS ent_bodega
            ,IFNULL(ce.articulos_entallados,0) AS ent_cedis
            ,SUM(c.articulos_entallados)+0+IFNULL(ce.articulos_entallados,0) AS ent_total
            ,SUM(c.articulos_picos) AS picos_total
            ,SUM(c.articulos_entallados)+0+SUM(c.articulos_picos) AS tot_lotes
            ,SUM(i.articulos_entallados)+SUM(i.articulos_picos) AS tot_lotes_loti
            ,SUM(i.articulos_entallados)+IFNULL(ce.articulos_entallados,0) AS ent_loti 
            ,SUM(c.articulos_unitalla) AS articulos_unitalla
            ,ROUND(( IFNULL(ROUND((10* ( SUM(i.articulos_entallados) + 0 + IFNULL(ce.articulos_entallados,0)) )/(IFNULL(SUM(b.meta_piso),0)+IFNULL(SUM(b.meta_bodega),0)+IFNULL(SUM(b.meta_cedis_calc),0))),0) )) AS porc_loti_meta
            ,SUM(i.articulos_entallados)+IFNULL(ce.articulos_entallados,0)-SUM(c.articulos_entallados) AS dif_loti
            ,SUM(i.articulos_picos) AS picos_loti
            ,SUM(i.articulos_picos)-SUM(c.articulos_picos) AS dif_picos
            ,IFNULL(SUM(b.meta_piso),0)+IFNULL(SUM(b.meta_bodega),0)+IFNULL(SUM(b.meta_cedis_calc),0) - IFNULL(SUM(i.articulos_entallados),0) + 0 - IFNULL(ce.articulos_entallados,0) AS compra_lotes
            ,CONCAT(FORMAT(SUM(c.articulos_entallados),0),' --> ',ROUND(100*SUM(c.articulos_entallados)/(SUM(c.articulos_entallados)+SUM(c.articulos_picos))),'%') AS entallados
            ,CONCAT(FORMAT(SUM(c.articulos_picos),0),' --> ',ROUND(100*SUM(c.articulos_picos)/(SUM(c.articulos_entallados)+SUM(c.articulos_picos))),'%') AS picos
            FROM tienda_entallado c 
            INNER JOIN tienda_entallado_loti i
            ON c.fecha=i.fecha AND c.suc=i.suc AND c.genero=i.genero AND c.linea=i.linea
            LEFT JOIN tienda_entallado ce
            ON ce.fecha=i.fecha AND ce.suc='00 CDS' AND ce.genero=i.genero AND ce.linea=i.linea
            LEFT JOIN metas2 b ON b.tienda=c.suc AND b.genero=c.genero AND b.linea=c.linea
            WHERE c.linea<>'' AND c.fecha=CURDATE() ".$tipo1.$tipo2.$tipo3." 
            #AND c.articulos_entallados <> i.articulos_entallados
            #GROUP BY 1,2"; 
          //die($query);

            if ($result = $mysqli->query($query)) {

                $javascript = 'let data = {
                    "name": "mapa",
                    "children": [{
                        "name": "Nivel de servicio '.$tienda.' - '.$titulo.'",
                        "children": [';

                /* fetch associative array */
                while ($row = $result->fetch_assoc()) {

                    if($row["genero"]!=='TOTAL'){
                    $javascript = $javascript . '
                     {
                        "genero": "'.$row["genero"].'",
                        "linea": "'.$row["linea"].'",
                        "lin": "'.$row["lin"].'",
                        "meta_total": '.$row["meta_total"].',
                        "ent_loti": "'.$row["ent_loti"].'",
                        "dif_loti": "'.$row["dif_loti"].'",
                        "ent_total": "'.$row["ent_total"].'",
                        "meta_piso": "'.$row["meta_piso"].'",
                        "meta_total": '.$row["meta_total"].',
                        "compra_lotes": '.$row["compra_lotes"].',
                        "articulos_unitalla": '.$row["articulos_unitalla"].',
                        "nivel_servicio": '.$row["porc_loti_meta"].',
                        "href": "https://bc.usoreal.com"
                      },';
                    }
                      $tabla = $tabla . '<tr>
                      <td>'.$row["tienda"].'</td>
                      <td><a href="index_ent_det.php?tienda='.$row["suc"].'&gen='.$row["genero"].'">'.$row["genero"].'</a></td>
                      <td>'.$row["art_ent"].'</td>
                      <td>'.$row["meta_piso"].'</td>
                      <td>'.$row["compra_lotes"].'</td>
                      <td>'.$row["tot_lotes"].'</td>
                      <td>'.$row["nivel_servicio_porc"].'%</td>
                      <td>'.$row["meta_bodega"].'</td>
                      <td>'.$row["meta_total"].'</td>
                      <td>'.$row["meta_cedis_calc"].'</td>
                      <td>'.$row["existencia"].'</td>
                      <td>'.$row["transito"].'</td>
                      <td>'.$row["total"].'</td>
                    </tr>';

                }

                // borra el ultimo caracter
                $javascript = rtrim($javascript, ",");

                // pone el final del json
                $javascript = $javascript . '      ]
                        }
                    ]
                };';
    
                /* free the memory associated with this result set */
                $result->free();
            }
        } catch (mysqli_sql_exception $e) { // Failed to connect? Lets see the exception details..
            echo "MySQLi Error Code: " . $e->getCode() . "<br />";
            echo "Exception Msg: " . $e->getMessage();
            exit; // exit and close connection.
        }

        $mysqli->close(); // finally, close the connection
        
 ?>  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php echo $marca;?></title>
    

    <link href="mapa_font-face.css" rel="stylesheet" type="text/css" />
    
    <link rel="stylesheet" href="mapa_style.css">

    <script src="mapa_d3.v5.min.js"></script>
    <script src="mapa_panzoom.min.js"></script>

  <!-- Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <!-- Icons -->
  <link rel="stylesheet" href="../../assets/vendor/nucleo/css/nucleo.css" type="text/css">
  <link rel="stylesheet" href="../../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
  <!-- Page plugins -->
  <link rel="stylesheet" href="../../assets/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="../../assets/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="../../assets/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
  <!-- Argon CSS -->
  <link rel="stylesheet" href="../../assets/css/argon.css?v=1.1.0" type="text/css">

  <style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
     
    th,
    td {
        padding: 5px;
    }
    </style>
</head>

<body>

<div class="card-header bg-transparent border-0">
<h2><font color=white>Después del LOTIFICA</font></h2>
              <form method="get" name="forma1" id="forma1" action="mapa_compras.php">
                <input type="hidden" name="gen" id="gen">

                <a href="#" class="btn btn-sm btn-neutral" onclick="document.getElementById('gen').value='dama';document.getElementById('forma1').submit();return false;">Dama</a>
                <a href="#" class="btn btn-sm btn-neutral" onclick="document.getElementById('gen').value='caballero';document.getElementById('forma1').submit();return false;">Caballero</a>
                <a href="index_compras.php" class="btn btn-sm btn-neutral">Regresar</a> 

                <div class="custom-control custom-checkbox">
                <input class="custom-control-input" type="checkbox" name="tie" id="tie" value="5" <?php if($_GET["tie"]=="5"){echo "checked";}?>>
                <label class="custom-control-label" for="tie">Fitra 5 tiendas</label>
                </div>

                <div class="custom-control custom-checkbox">
                <input class="custom-control-input" type="checkbox" name="cds" id="cds" value="si" <?php if($_GET["cds"]=="si"){echo "checked";}?>>
                <label class="custom-control-label" for="cds">00 CDS</label>
                </div>

              </form>
            </div>

            <div class="card-header bg-transparent border-0">
            <h2><font color=white>Antes del LOTIFICA</font></h2>
                <form method="get" name="forma2" id="forma2" action="mapa_cat.php">
                <input type="hidden" name="gen" id="gen2">

                <a href="#" class="btn btn-sm btn-neutral" onclick="document.getElementById('gen2').value='dama';document.getElementById('forma2').submit();return false;">Dama</a>
                <a href="#" class="btn btn-sm btn-neutral" onclick="document.getElementById('gen2').value='caballero';document.getElementById('forma2').submit();return false;">Caballero</a>
                <a href="index_cat.php" class="btn btn-sm btn-neutral">Regresar</a> 

                <div class="custom-control custom-checkbox">
                <input class="custom-control-input" type="checkbox" name="tie" id="tie2" value="5" <?php if($_GET["tie"]=="5"){echo "checked";}?>>
                <label class="custom-control-label" for="tie2">Fitra 5 tiendas</label>
                </div>

                <div class="custom-control custom-checkbox">
                <input class="custom-control-input" type="checkbox" name="cds" id="cds2" value="si" <?php if($_GET["cds"]=="si"){echo "checked";}?>>
                <label class="custom-control-label" for="cds2">00 CDS</label>
                </div>

              </form>
            </div>

    <div id="chart"></div>

<script>
 <?php echo $javascript;?>

let chartDiv = document.getElementById("chart");
let svg = d3.select(chartDiv).append("svg");

let format = d3.format(",d");

let colors = [
  "#AA2121",
  "#C84040",
  "#ED7171",
  "#7EC17E",
  "#518651",
  "#215E2C"
];

function getColor(val) {
  let color = "red"
  switch (parseInt(val)) {
    case 0:
    case 1:
    case 2:
    case 3:
      color = colors[0]
      break;
    case 4:
      color = colors[1]
      break;
    case 5:
      color = colors[2]
      break;
      // centro
    case 6:
      color = colors[3]
      break;
    case 7:
    case 8:
      color = colors[4]
      break;   
    case 9:
    case 10:
        color = colors[5]  
    default:
      color = colors[5]
  }
  return color
}

var tooltip = d3.select("#chart").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

function redraw() {
  var width = chartDiv.clientWidth;
  var height = chartDiv.clientHeight;

  d3.select("svg").html("");

  let chart = () => {
    const root = treemap(filteredData);

    const svg = d3.select("svg");

    svg
      .attr("width", width)
      .attr("height", height)
      .classed("svg-content-responsive", true);

    const leaf = svg
      .selectAll("g")
      .data(root.leaves())
      .enter()
      .append("g")
      .attr("transform", d => `translate(${d.x0},${d.y0})`)
      .on("mousemove", function (d) {
        // console.log(d)
        tooltip.transition()
          .duration(300)
          .style("opacity", .98);
        tooltip.html(`<div class="tooltip-body" data-id=${d.data.linea} >
          <ul>
            <li>Cat: ${d.data.linea}</li>
            <li>Ent total: ${d.data.ent_total}</li>
            <li>Lotifica: ${d.data.ent_loti}</li>
            <li>Meta tot: ${d.data.meta_total}</li>
            <li>Compra lotes: ${d.data.compra_lotes}</li>
          </ul>
          
      </div>`)
          .style("left", (d3.event.pageX + 10) + "px")
          .style("top", (d3.event.pageY + 10) + "px");
      })
      .on("mouseout", function (d) {
        tooltip.transition()
          .duration(500)
          .style("opacity", 0);
      });

    // leaf.append("title").text(
    //   d =>
    //     `${d
    //       .ancestors()
    //       .reverse()
    //       .map(d => d.data.tienda)
    //       .join("/")}\n${format(d.entallados)}`
    // );

    leaf
      .append("rect")
      .attr("id", d => (d.leafUid = "#leaf").id)
      .attr("fill", (d) => getColor(d.data.nivel_servicio))
      .attr("fill-opacity", 1.0)
      .attr("width", d => d.x1 - d.x0)
      .attr("height", d => d.y1 - d.y0)
      .attr("class", (d) => "node level-" + d.depth);
    // .on("mouseover", (d) => {
    //   d3.select(this)
    //     .style("stroke", "yellow")
    //     .style("opacity", 1)
    //  });

     leaf.append("clipPath")
         .attr("id", d => (d.clipUid = ("#clip")).id)
         .append("use")
         .attr("xlink:href", d => d.leafUid.href);

    let txt = leaf
      .append("text")
      .attr("fill", "#fff")
      .attr("text-anchor", "middle")
      .attr("class", "shadow")
      // .attr("dy", "1.7em")
      .attr("y", function () {
        const parentData = d3.select(this.parentNode).datum();
        return (parentData.y1 - parentData.y0) / 2;
      })
      // .attr("x", "1.7em")
      // .attr("unicode-bidi","isolate-override")
      .attr("font-size", d => Math.min(d.x1 - d.x0, d.y1 - d.y0) / 6);


    // Add a <tspan class="title"> for every data element.
    txt.append("tspan")
      .text(d => d.data.lin)
      .attr("class", "title")
      .attr("dy", "-1.5em")
      .attr("x", function () {
        const parentData = d3.select(this.parentNode).datum();
        return (parentData.x1 - parentData.x0) / 2;
      });

    // Add a <tspan class="author"> for every data element.
    txt.append("tspan")
      .text(d => d.data.compra_lotes)
      .attr("class", "title")
      .attr("dy", "1.4em")
      .attr("x", function () {
        const parentData = d3.select(this.parentNode).datum();
        return (parentData.x1 - parentData.x0) / 2;
      });

    // Add a <tspan class="author"> for every data element.
    // .text(d => `Lotifica ${d.data.dif_loti}`) 073612fcoislas 073612FCOISLAS
    txt.append("tspan")
    .text(d => `${d.data.articulos_unitalla} uni`)
      .attr("class", "price")
      .attr("dy", "1.4em")
      .attr("x", function () {
        const parentData = d3.select(this.parentNode).datum();
        return (parentData.x1 - parentData.x0) / 2;
      });

    // Add a <tspan class="text"> for every text line.
    // txt.selectAll("tspan.text")
    //     .data(d => d.text.split("\n"))
    //     .enter()
    //     .append("tspan")
    //     .attr("class", "text")
    //     .text(d => d)
    //     .attr("dy", "1.1em")
    //     .attr("x", function() {
    //       const parentData = d3.select(this.parentNode).datum();
    //       return (parentData.x1 - parentData.x0) / 2;
    //     });  

    //       .selectAll("tspan")
    //       .data(d =>
    //         d.data.tienda
    //           .split(/(?=[A-Z][^A-Z])/g)
    //           .concat(format(d.data.tot_lotes))
    //           .concat("+%"+format(d.data.nivel_servicio))
    //       )
    //       .enter()
    //       .append("tspan")
    //       // .style("width", d => d.x1 - d.x0)
    //       // .style("height", d => d.y1 - d.y0)
    //       // .attr("direction" ,"rtl")
    //       // .attr("xml:lang","fa")
    //       // .attr("unicode-bidi","bidi-override")
    //       // .attr("transform", "(250 250 250 250)")
    //       // .style("text-anchor", "start")
    //       // .attr("dominant-baseline", "central")
    //       // .attr("y", function() {
    //       //   const parentData = d3.select(this.parentNode).datum();
    //       //   return (parentData.y1 - parentData.y0) / 2;
    //       // })
    //       .attr("dy", "1.4em")
    //       .attr("x", function() {
    //         const parentData = d3.select(this.parentNode).datum();
    //         return (parentData.x1 - parentData.x0) / 2;
    //       })
    //       .attr("font-weight", (d, i, nodes) =>
    //         i === nodes.length - 1 ? "400" : "700"
    //       )
    //       .text(d => d);





    // Add title for the top level
    svg
      .selectAll("titles")
      .data(
        root.descendants().filter(function (d) {
          return d.depth == 1;
        })
      )
      .enter()
      .append('g')
      .attr("x", (d) => d.x0)
      .attr("y", (d) => d.y0)
      .attr("dx", (d) => d.x0 + d.x1)
      .attr("dy", (d) => d.y0 + d.y1)
      .append("text")
      .attr("x", (d) => d.x0 + 3)
      .attr("y", (d) => d.y0 + 18)
      .text((d) => d.data.name)
      // .attr("font-size", d => Math.max(d.x1 - d.x0, d.y1 - d.y0) / 22)
      .attr("font-size", "16px")
      .attr("font-weight", "400")
      .attr("fill", "#fff");

    return svg.node();
  };

  let filteredData = d3
    .hierarchy(data)
    .sum(d => d.meta_total)
    .sort((a, b) => b.height - a.height || b.value - a.value);

  let reg = d3.selectAll("input[name='dtype']").on("change", function () {
    let dtype = this.value;
  });

  let treemap = d3
    .treemap()
    .size([width, height])
    .padding(1)
    .paddingRight(3)
    .paddingTop(25)
    .round(true);

  // let charsts = d3.select("#chart");

  let format = d3.format(",d");

  chart();
}

// Draw for the first time to initialize.
redraw();

// Redraw based on the new size whenever the browser window is resized.
window.addEventListener("resize", redraw);

// ZOOM Function
var instance = panzoom(document.getElementById("chart"), {
  zoomSpeed: 0.06,
  maxZoom: 20,
  minZoom: 1
});

instance.on("panstart", function (e) {
  console.log("Fired when pan is just started ", e);
  // Note: e === instance.
});

instance.on("pan", function (e) {
  console.log("Fired when the scene is being panned", e);
});

instance.on("panend", function (e) {
  console.log("Fired when pan ended", e);
});

instance.on("zoom", function (e) {
  console.log("Fired when scene is zoomed", e);
});

instance.on("transform", function (e) {
  // This event will be called along with events above.
  console.log("Fired when any transformation has happened", e);
});
</script>
                       
              <!--table>
                <thead>
                  <tr>
                    <th>Tienda</th>
                    <th>Genero</th>
                    <th>Ent tie</th>
                    <th>Meta Ent Tie</th>
                    <th>Lotes faltantes</th>
                    <th>Lotes totales</th>
                    <th>Nivel satisfaccion</th>
                    <th>Meta Ent Bod</th>
                    <th>Meta Total</th>
                    <th>Meta Cedis Calc</th>
                    <th>Existencia</th>
                    <th>Transito</th>
                    <th>Total</th>
                  </tr>
                </thead>
                <tfoot>

                </tfoot>
                <tbody>
                  <?php //echo $tabla;?>
                </tbody>
              </table-->
    


  <!-- Argon Scripts -->
  <!-- Core -->
  <script src="../../assets/vendor/jquery/dist/jquery.min.js"></script>
  <script src="../../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="../../assets/vendor/js-cookie/js.cookie.js"></script>
  <script src="../../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
  <script src="../../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
  <!-- Optional JS -->
  <script src="../../assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
  <script src="../../assets/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="../../assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
  <script src="../../assets/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
  <script src="../../assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
  <script src="../../assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
  <script src="../../assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
  <script src="../../assets/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
  <!-- Argon JS -->
  <script src="../../assets/js/argon.js?v=1.1.0"></script>

</body>

</html>