<?php
session_start();
if (!isset($_SESSION['usuario'])) {
  header("Location: ../../Controlador/Utilidades/Sesion_Destroy.php");
  exit();
}
$rol    = $_SESSION['rol']    ?? '';
$nombre = $_SESSION['nombre'] ?? '';
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mantenimiento de Aceite</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png" />

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- DataTables -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css" />
  <!-- Buttons (export) opcional -->
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css"/>
  <!-- Boxicons -->
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
  <!-- Estilo claro propio -->
  <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Style_table_Gestion.css" />
  <!-- SweetAlert -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.min.css"/>

  <!-- Select2 -->
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <!-- Tema Select2 para Bootstrap 5 (opcional pero recomendado) -->
  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
</head>
<body>

<div class="container my-4">
  <div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
    <h2 class="m-0 text-primary"><i class='bx bx-wrench me-2'></i> Cambio de Aceite</h2>
    <button id="btnNuevo" class="btn btn-primary mt-3 mt-md-0">
      <i class='bx bx-plus-circle'></i> Nuevo mantenimiento
    </button>
  </div>

  <div class="table-wrapper">
    <table id="tblMantAceite" class="table table-striped table-bordered nowrap" style="width:100%">
      <thead class="table-primary">
        <tr>
          <th>Placa</th>
          <th>Últ. cambio (km)</th>
          <th>Últ. cambio (fecha)</th>
          <th>Frecuencia (km)</th>
          <th>KM actual</th>
          <th>Próx. cambio (km)</th>
          <th>KM restantes</th>
          <th>Estado</th>
          <th>Obs.</th>
          <th>Actualizado</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div class="mt-2 text-secondary">
      Tip: el color de <strong>KM restantes</strong> cambia:
      <span class="badge bg-danger">≤ 0</span>
      <span class="badge bg-warning text-dark">≤ 500</span>
      <span class="badge bg-success">&gt; 500</span>
    </div>
  </div>
</div>

<!-- Modal para registrar mantenimiento -->
<div class="modal fade" id="modalMantAceite" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title"><i class='bx bx-plus-circle me-2'></i> Registrar cambio de aceite</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="frmMantAceite">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Vehículo</label>
              <select id="selVehiculo" name="vehiculo_id" class="form-select" required></select>
            </div>
            <div class="col-md-3">
              <label class="form-label">KM actual</label>
              <input type="number" id="km_actual" class="form-control" readonly>
            </div>
            <div class="col-md-3">
              <label class="form-label">KM del cambio</label>
              <input type="number" id="km_cambio" name="km_cambio" class="form-control" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Fecha del cambio</label>
              <input type="date" id="fecha_cambio" name="fecha_cambio" class="form-control" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Frecuencia (KM)</label>
              <input type="number" id="frecuencia_km" name="frecuencia_km" class="form-control" value="5000">
            </div>
            <div class="col-md-4">
              <label class="form-label">Observación</label>
              <input type="text" id="observacion" name="observacion" class="form-control" placeholder="Opcional">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal"><i class='bx bx-x'></i> Cancelar</button>
        <button class="btn btn-success" id="btnGuardarCambio"><i class='bx bx-save'></i> Guardar</button>
      </div>
    </div>
  </div>
</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.7.1.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.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.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.bootstrap5.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/sweetalert2@11.7.12/dist/sweetalert2.all.min.js"></script>

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

<!-- JS del módulo -->
<script src="../../Modelo/Archivos_JS/Mant_Aceite.js?v=2.2.0"></script>
</body>
</html>
