<?php
session_start();
require_once '../../Controlador/Utilidades/Conexion_BD.php';
require_once '../../Controlador/Utilidades/Permisos.php';

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

$conn = new Conexion_BD();
$cn   = $conn->getConnection();

// Permisos del módulo "repuestos"
$tienePermisoAgregar   = tienePermiso('repuestos', 'puede_agregar');
$tienePermisoEditar    = tienePermiso('repuestos', 'puede_editar');
$tienePermisoEliminar  = tienePermiso('repuestos', 'puede_eliminar');
$tienePermisoReportes  = tienePermiso('repuestos', 'puede_reportes');
$tienePermisoMov       = tienePermiso('repuestos', 'puede_movimientos');

// ====================== PRECARGA PARA TARJETAS ======================
$preQuery = "
SELECT r.id,
       r.sku,
       r.nombre,
       COALESCE(c.nombre,'-')  AS categoria,
       u.abreviatura          AS um,
       COALESCE(a.nombre,'-') AS almacen,
       COALESCE(p.nombre,'-') AS proveedor,
       r.stock_actual,
       r.stock_min,
       r.costo_promedio,
       r.imagen               AS imagen   -- NUEVO: traemos la imagen
FROM rep_repuestos r
LEFT JOIN rep_categorias c ON c.id = r.id_categoria
INNER JOIN rep_unidades u   ON u.id = r.id_unidad
LEFT JOIN rep_almacenes a   ON a.id = r.id_almacen_default
LEFT JOIN rep_proveedor p   ON p.id = r.id_proveedor
ORDER BY r.nombre ASC";

$preRes    = $cn->query($preQuery);
$repuestos = $preRes ? $preRes->fetch_all(MYSQLI_ASSOC) : [];
$conn->closeConnection();

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 - Gestión de Repuestos</title>

  <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png" />

  <!-- CSS -->
  <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; }

    .container { max-width: 1200px; }
  </style>
</head>

<body>

  <!-- ENCABEZADO CENTRADO (igual que vehículos) -->
  <div class="container text-center">
    <h2 class="my-4">Tabla Gestión de Repuestos</h2>
    <div class="button-borders d-inline-flex gap-3">
      <?php if ($tienePermisoAgregar): ?>
        <button class="button-name btn-add" type="button" data-bs-toggle="modal" data-bs-target="#modalRepuesto">
          Agregar Nuevo Repuesto +
        </button>
      <?php endif; ?>
      <button class="button-name" id="btnActualizarRepuestos" type="button">Actualizar</button>
    </div>
  </div>

  <div class="d-md-none text-center my-3">
    <button class="btn btn-primary" id="toggleViewBtn" type="button">Ver como tarjetas</button>
  </div>

  <!-- ======================= TABLA (≥768px) ======================= -->
  <div class="table-wrapper d-none d-md-block" id="tablaResponsive">
    <table id="tablaRepuestos" class="display nowrap" style="width:100%">
      <thead class="table-primary">
        <tr>
          <th>ID</th>
          <th>SKU</th>
          <th>Nombre</th>
          <th>Categoría</th>
          <th>UM</th>
          <th>Almacén</th>
          <th>Proveedor</th>
          <th>Stock</th>
          <th>Stock Min</th>
          <th>Costo Prom. (S/.)</th>
          <th>Opciones</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <!-- ======================= TARJETAS (<768px) ======================= -->
  <div id="tarjetasResponsive" class="d-none">
    <?php foreach($repuestos as $r): ?>
      <?php $badge = ($r['stock_actual'] <= $r['stock_min']) ? 'bg-warning' : 'bg-success'; ?>
      <div class="card mb-3 shadow-sm mx-2">
        <div class="card-body">
          <h5 class="card-title text-primary"><?= e($r['sku']) . ' - ' . e($r['nombre']) ?></h5>
          <p class="card-text mb-1">
            <strong>Cat:</strong> <?= e($r['categoria']) ?> |
            <strong>UM:</strong> <?= e($r['um']) ?>
          </p>
          <p class="card-text mb-1"><strong>Almacén:</strong> <?= e($r['almacen']) ?></p>
          <p class="card-text mb-1"><strong>Proveedor:</strong> <?= e($r['proveedor']) ?></p>
          <p class="card-text mb-1">
            <strong>Stock:</strong>
            <span class="badge <?= $badge ?>"><?= (int)$r['stock_actual'] ?></span>
            &nbsp;&nbsp;<strong>Mín:</strong> <?= (int)$r['stock_min'] ?>
          </p>
          <p class="card-text mb-1"><strong>Costo Prom:</strong> S/. <?= number_format((float)$r['costo_promedio'], 2) ?></p>

          <div class="d-flex gap-2 mt-2">
            <?php if (!empty($r['imagen'])): ?>
              <button class="btn btn-sm btn-outline-secondary btn-img" type="button"
                      data-img="<?= e($r['imagen']) ?>"
                      title="Ver imagen">
                <i class="bx bx-show"></i>
              </button>
            <?php endif; ?>
            
            <?php if ($tienePermisoEditar): ?>
              <button class="btn btn-sm btn-outline-primary btn-edit" type="button"
                      data-id="<?= (int)$r['id'] ?>">
                <i class="bx bx-edit"></i>
              </button>
            <?php endif; ?>

            <?php if ($tienePermisoMov): ?>
              <button class="btn btn-sm btn-outline-success btn-mov" type="button"
                      data-id="<?= (int)$r['id'] ?>"
                      data-sku="<?= e($r['sku']) ?>"
                      data-nombre="<?= e($r['nombre']) ?>">
                <i class="bx bx-transfer"></i>
              </button>
            <?php endif; ?>

            <?php if ($tienePermisoEliminar): ?>
              <button class="btn btn-sm btn-outline-danger btn-del" type="button"
                      data-id="<?= (int)$r['id'] ?>">
                <i class="bx bx-trash"></i>
              </button>
            <?php endif; ?>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>

  <!-- ======================= MODAL CREAR/EDITAR ======================= -->
  <div class="modal fade" id="modalRepuesto" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content rounded-4 shadow">

        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title">
            <i class='bx bx-package me-2'></i> <span id="tituloModal">Nuevo Repuesto</span>
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>

        <!-- IMPORTANTE: enctype para subir archivo -->
        <form id="formRepuesto" enctype="multipart/form-data">
          <div class="modal-body">

            <input type="hidden" id="rep_id" name="id">

            <div class="row g-3">

              <div class="col-md-4">
                <label class="form-label">SKU (Código)</label>
                <input type="text" class="form-control" id="sku" name="sku" maxlength="40" required>
              </div>

              <div class="col-md-8">
                <label class="form-label">Nombre</label>
                <input type="text" class="form-control" id="nombre" name="nombre" maxlength="120" required>
              </div>

              <!-- Proveedor -->
              <div class="col-md-6">
                <label class="form-label d-flex justify-content-between align-items-center">
                  <span>Proveedor</span>
                  <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddProveedor" title="Crear proveedor">
                    <i class="bx bx-plus"></i>
                  </button>
                </label>
                <select id="id_proveedor" name="id_proveedor"
                        class="form-select select2-prov"
                        style="width:100%"
                        data-placeholder="Selecciona proveedor">
                </select>
              </div>

              <!-- Categoría -->
              <div class="col-md-6">
                <label class="form-label d-flex justify-content-between align-items-center">
                  <span>Categoría</span>
                  <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddCategoria" title="Crear categoría">
                    <i class="bx bx-plus"></i>
                  </button>
                </label>
                <select id="id_categoria" name="id_categoria"
                        class="form-select select2-cat"
                        style="width:100%">
                </select>
              </div>

              <!-- Unidad (con botón +) -->
              <div class="col-md-4">
                <label class="form-label d-flex justify-content-between align-items-center">
                  <span>Unidad</span>
                  <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddUnidad" title="Crear unidad">
                    <i class="bx bx-plus"></i>
                  </button>
                </label>
                <select id="id_unidad" name="id_unidad"
                        class="form-select select2-um"
                        required
                        style="width:100%">
                </select>
              </div>

              <!-- Almacén Default (con botón +) -->
              <div class="col-md-4">
                <label class="form-label d-flex justify-content-between align-items-center">
                  <span>Almacén</span>
                  <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddAlmacen" title="Crear almacén">
                    <i class="bx bx-plus"></i>
                  </button>
                </label>
                <select id="id_almacen_default" name="id_almacen_default"
                        class="form-select select2-alm"
                        style="width:100%">
                </select>
              </div>

              <!-- STOCKS ENTEROS -->
              <div class="col-md-2">
                <label class="form-label">Stock Mín.</label>
                <input type="number" step="1" min="0" class="form-control" id="stock_min" name="stock_min" value="0">
              </div>

              <div class="col-md-2">
                <label class="form-label">Stock Máx.</label>
                <input type="number" step="1" min="0" class="form-control" id="stock_max" name="stock_max" value="0">
              </div>

              <!-- Imagen del repuesto -->
              <div class="col-md-12 mt-3">
                <label class="form-label">Imagen del repuesto</label>
                <input type="file" class="form-control" id="imagen" name="imagen" accept="image/*">
                <input type="hidden" id="imagen_actual" name="imagen_actual">
              </div>

            </div>

          </div>

          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
            <button class="btn btn-primary" id="btnGuardarRepuesto">
              <i class="bx bx-save me-1"></i> Guardar
            </button>
          </div>

        </form>
      </div>
    </div>
  </div>

  <!-- ======================= MODAL MOVIMIENTO ======================= -->
  <div class="modal fade" id="modalMovimiento" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 shadow">

        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title">
            <i class='bx bx-transfer me-2'></i> Movimiento de Repuesto
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>

        <form id="formMovimiento">
          <div class="modal-body">

            <input type="hidden" id="mov_id_repuesto" name="id_repuesto">

            <div class="mb-2">
              <strong>Repuesto:</strong> <span id="mov_repuesto_txt" class="text-primary"></span>
            </div>

            <div class="row g-2">

              <div class="col-md-6">
                <label class="form-label">Tipo</label>
                <select id="tipo" name="tipo" class="form-select" required>
                  <option value="INGRESO">Ingreso</option>
                  <option value="SALIDA">Salida</option>
                  <option value="AJUSTE+">Ajuste (+)</option>
                  <option value="AJUSTE-">Ajuste (-)</option>
                </select>
              </div>

              <div class="col-md-6">
                <label class="form-label">Almacén</label>
                <select id="id_almacen" name="id_almacen"
                        class="form-select select2-alm"
                        required
                        style="width:100%">
                </select>
              </div>

              <div class="col-md-6">
                <label class="form-label">Cantidad</label>
                <input type="number" step="0.001" min="0.001" class="form-control" id="cantidad" name="cantidad" required>
              </div>

              <div class="col-md-6">
                <label class="form-label">Costo Unit. (S/.)</label>
                <input type="number" step="0.01" min="0" class="form-control" id="costo_unit" name="costo_unit" value="0">
              </div>

              <div class="col-md-6">
                <label class="form-label">Ref. Tipo</label>
                <input type="text" class="form-control" id="ref_tipo" name="ref_tipo">
              </div>

              <div class="col-md-6">
                <label class="form-label">Ref. DNI</label>
                <input type="text" class="form-control" id="ref_id" name="ref_id">
              </div>

              <div class="col-12">
                <label class="form-label">Observación</label>
                <input type="text" class="form-control" id="observacion" name="observacion">
              </div>

            </div>
          </div>

          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
            <button class="btn btn-primary" id="btnRegistrarMov">
              <i class="bx bx-check me-1"></i> Registrar
            </button>
          </div>
        </form>

      </div>
    </div>
  </div>

  <!-- JS -->
  <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>

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

  <script>
    window.repuestosData         = <?= json_encode($repuestos, JSON_UNESCAPED_UNICODE) ?>;
    window.puedeAgregar          = <?= $tienePermisoAgregar  ? 'true' : 'false' ?>;
    window.puedeEditar           = <?= $tienePermisoEditar   ? 'true' : 'false' ?>;
    window.puedeEliminar         = <?= $tienePermisoEliminar ? 'true' : 'false' ?>;
    window.puedeMov              = <?= $tienePermisoMov      ? 'true' : 'false' ?>;
    window.tienePermisoReportes  = <?= $tienePermisoReportes ? 'true' : 'false' ?>;

    window.empresaInfo = {
      nombre:  'TRANSPORTES Y SERVICIOS GENERALES JULIA EIRL',
      ruc:     '20526269510',
      usuario: <?= json_encode($_SESSION['usuario'] ?? 'Desconocido', JSON_UNESCAPED_UNICODE) ?>,
      cargo:   <?= json_encode($_SESSION['rol'] ?? 'Desconocido', JSON_UNESCAPED_UNICODE) ?>
    };
  </script>

  <!-- Lógica DataTable + Gestión -->
  <script src="../../Modelo/Archivos_JS/DataTable_Repuestos.js"></script>
  <script src="../../Modelo/Archivos_JS/Gestion_Repuestos.js"></script>

</body>
</html>
