@extends('layouts.app')
@section('titulo','Inicializar horómetros')
@section('contenido')

<h4><i class="fa fa-gauge-high"></i> Inicializar horómetros — fecha base</h4>

<div class="alert alert-warning">
  <strong><i class="fa fa-triangle-exclamation"></i> Atención.</strong>
  Esta operación <strong>reasigna la referencia de horómetro</strong> de los
  <strong>{{ $totalEquipos }} equipos activos</strong> a la fecha y horas/día que indiques.
  El sistema empezará a estimar el horómetro de cada equipo automáticamente desde ese punto.

  <ul class="mb-0 mt-2 small">
    <li><strong>{{ $sinReferencia }}</strong> equipos no tienen referencia hoy y necesitan inicialización.</li>
    <li>{{ $totalEquipos - $sinReferencia }} ya tienen referencia: sus valores se reemplazarán.</li>
    <li>Las lecturas históricas en <code>lecturas_horometro</code> se conservan.</li>
  </ul>
</div>

<form method="POST" action="{{ route('horometro.inicializar.run') }}" class="card p-3">
  @csrf
  <div class="row g-3">
    <div class="col-md-4">
      <label class="form-label small">Fecha base *</label>
      <input type="date" name="fecha_base" value="{{ $fechaDefault }}" class="form-control" required>
      <small class="text-muted">Día desde el que cuenta. Default: 1/ene del año en curso.</small>
    </div>
    <div class="col-md-4">
      <label class="form-label small">Horas / día *</label>
      <input type="number" step="0.5" min="0.5" max="24" name="horas_dia" value="24" class="form-control" required>
      <small class="text-muted">24 = operación continua · 16 = 2 turnos · 8 = 1 turno.</small>
    </div>
    <div class="col-md-4 d-flex align-items-end">
      <div class="form-check">
        <input type="hidden" name="reset_pm" value="0">
        <input type="checkbox" name="reset_pm" value="1" id="resetPm" class="form-check-input" checked>
        <label for="resetPm" class="form-check-label">Resetear contadores de PM (ultimo_pm_*)</label>
      </div>
    </div>

    <div class="col-12">
      <div class="alert alert-secondary mb-0">
        <h6 class="mb-2"><i class="fa fa-calculator"></i> Vista previa</h6>
        <div id="vistaPrevia">
          Con los valores actuales, <strong>hoy</strong> cada equipo arrancará en aproximadamente
          <strong id="horasHoy">— h</strong> de horómetro estimado.
        </div>
      </div>
    </div>

    <div class="col-12">
      <div class="form-check">
        <input type="checkbox" name="confirmar" value="1" id="confirmar" class="form-check-input" required>
        <label for="confirmar" class="form-check-label">
          <strong>Confirmo</strong> que entiendo que esta operación reasignará la referencia de todos los equipos activos.
        </label>
      </div>
    </div>
  </div>

  <div class="mt-3 text-end">
    <a href="{{ route('horometro.index') }}" class="btn btn-outline-secondary">Cancelar</a>
    <button class="btn btn-primario"><i class="fa fa-bolt"></i> Inicializar horómetros</button>
  </div>
</form>

@push('scripts_inline')
function calcularVistaPrevia() {
  const fecha = document.querySelector('input[name="fecha_base"]').value;
  const horas = parseFloat(document.querySelector('input[name="horas_dia"]').value) || 24;
  if (!fecha) return;
  const dias = Math.max(0, Math.floor((new Date() - new Date(fecha)) / 86400000));
  const total = (dias * horas).toLocaleString('es-PE', { maximumFractionDigits: 2 });
  document.getElementById('horasHoy').textContent = total + ' h (' + dias + ' días × ' + horas + ' h)';
}
document.querySelector('input[name="fecha_base"]').addEventListener('change', calcularVistaPrevia);
document.querySelector('input[name="horas_dia"]').addEventListener('input', calcularVistaPrevia);
calcularVistaPrevia();
@endpush
@endsection