<?php
session_start();

if (!isset($_SESSION['usuario'])) {
  header("Location: ../../Controlador/Utilidades/Sesion_Destroy.php"); exit();
}

function e($v){ return htmlspecialchars($v ?? '', ENT_QUOTES,'UTF-8'); }
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TSGJ - Kardex de Repuestos</title>
  <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png" />

  <!-- CSS base -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css"/>
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css"/>
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Style_table_Gestion.css" />

  <!-- Select2 -->
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <style>
    .select2-container .select2-selection--single{ height:38px; }
    .select2-selection__rendered{ line-height:38px !important; }
    .select2-selection__arrow{ height:38px !important; }
  </style>
</head>
<body>

  <div class="container">
    <h2 class="my-4">Kardex / Movimientos de Repuestos</h2>
    <div class="row g-2 align-items-end">
      <div class="col-md-4">
        <label class="form-label">Repuesto</label>
        <select id="f_rep" class="form-select" style="width:100%"></select>
      </div>
      <div class="col-md-3">
        <label class="form-label">Almacén</label>
        <select id="f_alm" class="form-select" style="width:100%"></select>
      </div>
      <div class="col-md-2">
        <label class="form-label">Desde</label>
        <input type="date" id="f_desde" class="form-control">
      </div>
      <div class="col-md-2">
        <label class="form-label">Hasta</label>
        <input type="date" id="f_hasta" class="form-control">
      </div>
      <div class="col-md-1 d-grid">
        <button class="button-name" id="btnFiltrar" type="button">Filtrar</button>
      </div>
    </div>
  </div>

  <div class="d-md-none text-center my-3">
    <span class="badge bg-info">La tabla se adapta a móvil</span>
  </div>

  <div class="table-wrapper mt-3">
    <table id="tablaKardex" class="display nowrap" style="width:100%">
      <thead class="table-primary">
        <tr>
          <th>ID</th>
          <th>Fecha</th>
          <th>Repuesto</th>
          <th>Almacén</th>
          <th>Tipo</th>
          <th>Cantidad</th>
          <th>Costo Unit. (S/.)</th>
          <th>Ref.</th>
          <th>Observación</th>
          <th>Usuario</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <!-- JS base -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

  <!-- Select2 -->
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

  <!-- JS propio -->
  <script src="../../Modelo/Archivos_JS/DataTable_Rep_Movimientos.js"></script>
</body>
</html>
