<?php
session_start();
// Vista independiente de pre-nómina (sin sidebar ni topbar)
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Pre-nómina — Inicio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css" rel="stylesheet" />
  <style>
    /* Pequeños ajustes locales para la vista de prenómina */
    .panel-card { border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,.08); }
    .amount-input { max-width:160px; }
    .totals-box { font-size:1.05rem; }
    /* Estilos para el wizard de pasos */
    .pc-wizard { background:#fff; padding:12px; border-radius:8px; margin-bottom:18px; box-shadow:0 1px 6px rgba(0,0,0,.04); }
    .pc-wizard .steps { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .pc-step { flex:1 1 0; min-width:120px; padding:10px 12px; border-radius:6px; text-align:center; cursor:pointer; border:1px solid #e9ecef; background:#f8f9fa; }
    .pc-step.active { background:#0d6efd; color:#fff; border-color:#0d6efd; font-weight:600; }
    .pc-step.disabled { opacity:0.6; pointer-events:none; }
    .pc-wizard .wizard-controls { margin-top:12px; display:flex; gap:8px; justify-content:flex-end; }
    .pc-wizard .wizard-content { margin-top:12px; padding:8px 6px; border-top:1px dashed #e9ecef; }
  </style>
</head>
<body class="bg-light d-flex">
  <div class="flex-grow-1 p-4">

    <div class="p-4">
      <h3 class="text-att mb-4"><i class="fas fa-calculator me-2"></i>Pre-nómina — Inicio</h3>

      <!-- Wizzard de pasos: Incidencias -> Descuentos -> Bonos -> Sueldos -->
      <div class="pc-wizard" id="pcWizzard">
        <div class="steps" id="pcSteps"></div>
        <div class="wizard-content" id="pcWizardContent">Cargando...</div>
        <div class="wizard-controls">
          <button id="pcPrev" class="btn btn-sm btn-outline-secondary">Anterior</button>
          <button id="pcNext" class="btn btn-sm btn-primary">Siguiente</button>
        </div>
      </div>

    </div>
  </div>

  <script src="../../frontend/assets/js/wizzards.js"></script>
  <script src="../../frontend/assets/js/modules/incidencias.module.js"></script>
</body>
</html>
