<style>
    h2 { margin-top: 40px; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    th { background-color: #f4f4f4; }
    .alta { background-color: #d4edda; }
    .baja { background-color: #f8d7da; }
    .filtros { margin-bottom: 20px; }
    .filtros select, .filtros input { margin-right: 10px; padding: 5px; }
  </style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>📊 Reportes de Inventario</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="inicio">Inicio</a></li>
              <li class="breadcrumb-item active">Abastecimiento de Precision de Inventarios</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="filtros">
        <label>Sucursal:</label>
          <select id="filtroSucursal" >
            <option value="">Todas</option>
            <option value="1">AREQUIPA</option>
            <option value="2">LIMA</option>
            <option value="3">PUNO</option>
            <!-- Agrega más según tus IDs -->
          </select>

        <label>Producto:</label>
        <input type="text" id="filtroProducto" class=" input-lg" placeholder="Nombre o ID">

        <label>Desde:</label>
        <input type="date" id="filtroDesde" class=" input-lg">

        <label>Hasta:</label>
        <input type="date" id="filtroHasta" class=" input-lg" >

        <button type="button" class="btn btn-success" onclick="aplicarFiltros()">Aplicar filtros</button>
      </div>

      <button type="button" class="btn btn-success" onclick="exportarExcel()">Exportar a Excel</button>


      <!-- Default box -->
      <div class="card"> 
        <div class="card-body">
         
              <h2>Rotacion de Inventario</h2>
              <table id="tablaRotacion" class="table table-bordered table-striped dt-responsive tabla"  style="font-size:90%; line-height:14px ">
                <thead>
                  <tr>
                    <th>ID</th><th>Descripcion</th><th>Sucursal</th><th>Costo Ventas</th><th>Inventario Promedio</th><th>Rotacion</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>

              <h2>Precision de Inventario</h2>
              <table id="tablaPrecision" class="table table-bordered table-striped dt-responsive tabla1"  style="font-size:90%; line-height:14px ">
                <thead>


                  <tr>
                    <th>ID</th><th>Descripcion</th><th>Sucursal</th><th>Stock Fisico</th><th>Stock Auditado</th><th>% Precision</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>

              <h2>Abastecimiento de Pedidos</h2>
              <table id="tablaAbastecimiento" class="table table-bordered table-striped dt-responsive tabla2"  style="font-size:90%; line-height:14px ">
                <thead>
                  <tr>
                    <th>ID</th><th>Descripcion</th><th>Sucursal</th><th>Pedidos</th><th>Abastecidos</th><th>% Abastecimiento</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>

              <h3>Gráfico por Sucursal</h3>
              <canvas id="graficoRotacion" height="100"></canvas>
              <canvas id="graficoPrecision" height="100"></canvas>
              <canvas id="graficoAbastecimiento" height="100"></canvas>



        </div>

        <!-- /.card-body -->
      </div>
      <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>

  </div>
</div>

  <script>

    const sucursales = {
      1: "Arequipa",
      2: "Lima",
      3: "Puno"
    };
    function nombreSucursal(id) {
      return sucursales[id] || `Sucursal ${id}`;
    }


     async function cargarReporte(url, tablaId, renderFila, canvasId = null, campoSucursal = null, campoValor = null, label = null) {
      const res = await fetch(url);
      const data = await res.json();
      const tbody = document.querySelector(`#${tablaId} tbody`);
      tbody.innerHTML = "";
      data.forEach(item => {
        const fila = renderFila(item);
        tbody.appendChild(fila);
      });

      if (canvasId && campoSucursal && campoValor) {
        generarGraficoPorSucursal(data, canvasId, campoSucursal, campoValor, label);
      }
    }


      function crearFilaRotacion(item) {
        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td>${item.producto_id || item.id}</td>
          <td>${item.descripcion}</td>
          <td>${nombreSucursal(item.sucursal_id)}</td>
          <td>${item.costo_ventas}</td>
          <td>${item.inventario_promedio}</td>
          <td>${item.rotacion}</td>
        `;
        return tr;
      }

  function crearFilaPrecision(item) {
    const tr = document.createElement("tr");
    const clase = item.porcentaje_precision >= 90 ? "alta" : "baja";
    tr.innerHTML = `
      <td>${item.producto_id}</td>
      <td>${item.descripcion}</td>
      <td>${nombreSucursal(item.sucursal_id)}</td>
      <td>${item.stock_fisico}</td>
      <td>${item.stock_auditado}</td>
      <td class="${clase}">${item.porcentaje_precision}%</td>
    `;
    return tr;
  }

  function crearFilaAbastecimiento(item) {
    const tr = document.createElement("tr");
    const clase = item.tasa_abastecimiento >= 90 ? "alta" : "baja";
    tr.innerHTML = `
      <td>${item.producto_id}</td>
      <td>${item.descripcion}</td>
      <td>${nombreSucursal(item.sucursal_id)}</td>
      <td>${item.pedidos_solicitados}</td>
      <td>${item.pedidos_abastecidos}</td>
      <td class="${clase}">${item.tasa_abastecimiento}%</td>
    `;
    return tr;
  }

  function aplicarFiltros() {
    const sucursal = document.getElementById("filtroSucursal").value;
    const producto = document.getElementById("filtroProducto").value;
    const desde = document.getElementById("filtroDesde").value;
    const hasta = document.getElementById("filtroHasta").value;

    const params = new URLSearchParams();
    if (sucursal) params.append("sucursal", sucursal);
    if (producto && !isNaN(producto)) params.append("producto", producto);
    if (desde) params.append("desde", desde);
    if (hasta) params.append("hasta", hasta);

    const urlBase = "https://prysystem.com.pe/api";
    cargarReporte(`${urlBase}/kpi-rotacion?${params.toString()}`, "tablaRotacion", crearFilaRotacion, "graficoRotacion", "sucursal_id", "rotacion", "Rotación por Sucursal");
    cargarReporte(`${urlBase}/kpi-precision?${params.toString()}`, "tablaPrecision", crearFilaPrecision, "graficoPrecision", "sucursal_id", "porcentaje_precision", "Precisión por Sucursal");
    cargarReporte(`${urlBase}/kpi-abastecimiento?${params.toString()}`, "tablaAbastecimiento", crearFilaAbastecimiento, "graficoAbastecimiento", "sucursal_id", "tasa_abastecimiento", "Abastecimiento por Sucursal");

  }

  // Carga inicial
  aplicarFiltros();

      
      var elemento = document.getElementById("utilidades");
      elemento.className += " active";

      var elemento = document.getElementById("utilidad");
      elemento.className += " menu-open";

      var elemento = document.getElementById("tasaPrecision");
      elemento.className += " active";

      function generarGraficoPorSucursal(data, canvasId, campoSucursal, campoValor, label) {
      const agrupado = {};

      data.forEach(item => {
        const sucursal = item[campoSucursal];
        if (!agrupado[sucursal]) agrupado[sucursal] = 0;
        agrupado[sucursal] += parseFloat(item[campoValor]) || 0;
      });

      const labels = Object.keys(agrupado).map(id => nombreSucursal(id));
      const valores = Object.values(agrupado);

      new Chart(document.getElementById(canvasId), {
        type: "bar",
        data: {
          labels,
          datasets: [{
            label,
            data: valores,
            backgroundColor: "#4e73df"
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: { display: false },
            title: { display: true, text: label }
          }
        }
      });
    }

    function exportarExcel() {
    const tablas = ["tablaRotacion", "tablaPrecision", "tablaAbastecimiento"];
    let contenido = `
      <html xmlns:o="urn:schemas-microsoft-com:office:office"
            xmlns:x="urn:schemas-microsoft-com:office:excel"
            xmlns="http://www.w3.org/TR/REC-html40">
      <head>
        <!--[if gte mso 9]>
        <xml>
          <x:ExcelWorkbook>
            <x:ExcelWorksheets>
              <x:ExcelWorksheet>
                <x:Name>Reportes</x:Name>
                <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>
              </x:ExcelWorksheet>
            </x:ExcelWorksheets>
          </x:ExcelWorkbook>
        </xml>
        <![endif]-->
      </head>
      <body>
    `;

    tablas.forEach(id => {
      const tabla = document.getElementById(id);
      if (tabla) {
        const titulo = tabla.previousElementSibling?.tagName === "H2"
          ? `<h2>${tabla.previousElementSibling.textContent}</h2>`
          : "";
        contenido += titulo + tabla.outerHTML + "<br><br>";
      }
    });

    contenido += "</body></html>";

    const blob = new Blob([contenido], { type: "application/vnd.ms-excel" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "reportes_inventario.xls";
    a.click();
  }


</script>

<script src="vistas/js/almacen.js"></script>

