<?php
require_once '../../Controlador/Utilidades/Conexion_BD.php';
$conn = new Conexion_BD();
$db = $conn->getConnection();

// Obtener rutas
$sql = "SELECT * FROM rutas";
$rutas = $db->query($sql);
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Calculadora de Kilometraje Estimado</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

  <style>
    /* --- Select2 alineado a la izquierda sin romper la tabla centrada --- */
    .select2-container .select2-selection--single .select2-selection__rendered,
    .select2-container .select2-selection--multiple .select2-selection__rendered,
    .select2-container .select2-results__option,
    .select2-container .select2-search--dropdown .select2-search__field {
      text-align: left !important;
    }
    /* Ancho completo dentro de la celda */
    .select2-container { width: 100% !important; }
    /* Altura cómoda */
    .select2-container--default .select2-selection--single {
      height: 38px; line-height: 38px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 38px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 38px;
    }
  </style>
</head>

<body class="container py-4">
  <h2 class="mb-4">🧮 Calculadora de Kilometraje Aproximado</h2>

  <!-- Fila de búsqueda: placa | buscar | último KM | última fecha -->
  <div class="row g-3 mb-4 align-items-center">
    <div class="col-md-4">
      <input type="text" id="placaInput" class="form-control" placeholder="Ingrese placa del vehículo" required>
    </div>
    <div class="col-md-2">
      <button type="button" onclick="buscarVehiculo()" class="btn btn-primary w-100">Buscar</button>
    </div>
    <div class="col-md-3">
      <input type="text" id="ultimoKmInput" class="form-control text-success fw-bold"
             value="Último KM: 0 km" readonly>
    </div>
    <div class="col-md-3">
      <input type="text" id="ultimaFechaInput" class="form-control text-secondary"
             value="Última fecha: —" readonly>
    </div>
  </div>

  <!-- Tabla de rutas -->
  <div class="card">
    <div class="card-header bg-info text-white">Rutas Recorridas</div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered align-middle text-center small" id="tablaRutas">
          <thead class="table-light">
            <tr>
              <th>Ruta</th>
              <th>Km por vuelta</th>
              <th>Vueltas</th>
              <th>Km adicionales</th>
              <th>Subtotal KM</th>
              <th></th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>

      <button type="button" class="btn btn-success" onclick="agregarFila()">+ Agregar Ruta</button>
      <hr>
      <h5>Total recorrido estimado: <span id="totalKM" class="text-primary">0</span> km</h5>
      <h5>Nuevo kilometraje final: <span id="nuevoKM" class="text-success fw-bold">0</span> km</h5>
      <button class="btn btn-outline-secondary mt-2" onclick="copiarKilometraje()">📋 Copiar nuevo KM</button>
    </div>
  </div>

  <!-- Script para pasar rutas desde PHP -->
  <script>
    window.rutasData = {
      <?php while ($ruta = $rutas->fetch_assoc()): ?>
      <?= (int)$ruta['id'] ?>: {
        nombre: "<?= addslashes($ruta['nombre_ruta']) ?>",
        km: <?= (int)$ruta['km_estimado'] ?>
      },
      <?php endwhile; ?>
    };
  </script>

  <!-- Helpers UI para Último KM y Fecha -->
  <script>
    // Formatea 'YYYY-MM-DD' o 'YYYY-MM-DD HH:MM:SS' a 'DD/MM/YYYY'
    function formatearFechaBonita(iso) {
      if (!iso) return '—';
      try {
        // Acepta 'YYYY-MM-DD' o Date parseable
        const d = new Date(iso.replace(' ', 'T'));
        if (isNaN(d.getTime())) return '—';
        const dd = String(d.getDate()).padStart(2,'0');
        const mm = String(d.getMonth()+1).padStart(2,'0');
        const yy = d.getFullYear();
        return `${dd}/${mm}/${yy}`;
      } catch(e){ return '—'; }
    }

    // Llamar a esto desde tu Fetch_Vehiculo.js cuando obtengas el último KM
    // Ejemplo allí: actualizarUltimoKM(resp.ultimoKm, resp.fechaUltimoKm);
    window.actualizarUltimoKM = function(km, fechaISO){
      const kmNum = (km === null || km === undefined) ? 0 : Number(km);
      document.getElementById('ultimoKmInput').value  = `Último KM: ${isFinite(kmNum) ? kmNum : 0} km`;
      document.getElementById('ultimaFechaInput').value = `Última fecha: ${formatearFechaBonita(fechaISO)}`;
    }

    // Estado inicial
    actualizarUltimoKM(0, null);
  </script>

  <!-- Tu lógica actual -->
  <script src="../../Modelo/Archivos_JS/Fetch_Vehiculo.js"></script>
</body>
</html>
