{% extends "base.html" %}
{% block title %}{{ 'Editar' if vehiculo else 'Nuevo' }} Vehículo{% endblock %}

{% block extra_css %}
.form-card { max-width: 860px; }
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin: 28px 0 20px;
}
.section-title:first-of-type { margin-top: 0; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
.col-full  { grid-column: 1 / -1; }
.col-2     { grid-column: span 2; }
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-eyebrow">Vehículos</div>
  <div class="page-title">{{ 'Editar vehículo ' ~ vehiculo['m_oficial'] if vehiculo else 'Nuevo vehículo' }}</div>

  <div class="page-subtitle">
    {{ 'Modifica los datos del vehículo.' if vehiculo else 'Completa el formulario para registrar un nuevo vehículo.' }}
  </div>
</div>
<div class="form-card">
  <form method="POST">
  <input type="hidden" name="_q"          value="{{ q|default('') }}">
  <input type="hidden" name="_desde"      value="{{ desde|default('') }}">
  <input type="hidden" name="_hasta"      value="{{ hasta|default('') }}">
  <input type="hidden" name="_q_itv"      value="{{ q_itv|default('') }}">
  <input type="hidden" name="_origen"     value="{{ origen|default('') }}">
  <input type="hidden" name="_q_viat"     value="{{ q_viat|default('') }}">

    {# ── IDENTIFICACIÓN ── #}
    <div class="section-title">Identificación  {{ '- id' ~ vehiculo['id'] if vehiculo }}</div>
    <div class="form-grid">
     
      <div class="form-group">
        <label class="form-label" for="m_oficial">Matrícula oficial</label>
        <input class="form-input" type="text" id="m_oficial" name="m_oficial"
          placeholder="Ej. 1234ABC" required
          oninput="this.value = this.value.toUpperCase();"
          value="{{ (vehiculo['m_oficial'] or '') if vehiculo else request.form.get('m_oficial', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="m_civil">Matrícula civil</label>
        <input class="form-input" type="text" id="m_civil" name="m_civil"
          placeholder="Ej. 5678XYZ"
          oninput="this.value = this.value.toUpperCase();"
          value="{{ (vehiculo['m_civil'] or '') if vehiculo else request.form.get('m_civil', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="m_propia">Matrícula propia</label>
        <input class="form-input" type="text" id="m_propia" name="m_propia"
          placeholder="Ej. 0123ZXZ"
          oninput="this.value = this.value.toUpperCase();"
          value="{{ (vehiculo['m_propia'] or '') if vehiculo else request.form.get('m_propia', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="VIN">VIN</label>
        <input class="form-input" type="text" id="VIN" name="VIN"
            placeholder="VIN"
            oninput="this.value = this.value.toUpperCase();"
            value="{{ (vehiculo['VIN'] or '') if vehiculo else request.form.get('VIN', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="poliza">Poliza</label>
        <input class="form-input" type="text" id="poliza" name="poliza"
            oninput="this.value = this.value.toUpperCase();"
            value="{{ (vehiculo['Poliza'] or '') if vehiculo else request.form.get('poliza', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="viat">Via-T</label>
        <input class="form-input" type="text" id="viat" name="viat" style="width: 210px; padding-left: 10px;"
            oninput="this.value = this.value.toUpperCase();"
            value="{{ (vehiculo['viat'] or '') if vehiculo else request.form.get('viat', '') }}">
      </div>

      <div class="form-group">
          <label class="form-label" for="legajo">Legajo</label>
        <input class="form-input" id="legajo" name="legajo"
               placeholder=""
               value="{{ (vehiculo['legajo'] or '') if vehiculo else request.form.get('viat', '') }}">
      </div>
    </div>

    {# ── CARACTERÍSTICAS TÉCNICAS ── #}
    <div class="section-title">Características técnicas</div>
    <div class="form-grid">

      <div class="form-group">
        <label class="form-label" for="marca">Marca</label>
        <input class="form-input" type="text" id="marca" name="marca"
               placeholder="Ej. Ford, Renault…" required
               value="{{ (vehiculo['marca'] or '') if vehiculo else request.form.get('marca', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="modelo">Modelo</label>
        <input class="form-input" type="text" id="modelo" name="modelo"
               placeholder="Ej. Transit, Kangoo…" required
               value="{{ (vehiculo['modelo'] or '') if vehiculo else request.form.get('modelo', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="tipo">Tipo vehículo</label>
        <div class="select-wrap">
          <select class="form-input form-select" id="tipo" name="tipo" required> 
            <option value="">— Selecciona tipo —</option>
            {% for tip in tipo %}
            <option value="{{ tip['tipo'] }}"
              {% if vehiculo and vehiculo['tipo'] == tip['tipo'] %}selected
              {% elif request.form.get('tipo') == tip['tipo'] %}selected
              {% endif %}>
              {{ tip['tipo'] }}
            </option>
            {% endfor %}
          </select>
          <svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label" for="color">Color</label>
        <input class="form-input" type="text" id="color" name="color"
               placeholder="Ej. Blanco, Negro…"
               value="{{ (vehiculo['color'] or '') if vehiculo else request.form.get('color', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="cilindrada">Cilindrada</label>
        <input class="form-input" type="text" id="cilindrada" name="cilindrada"
               placeholder="Ej. 1600cc"
               value="{{ (vehiculo['cilindrada'] or '') if vehiculo else request.form.get('cilindrada', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="potencia">Potencia (CV)</label>
        <input class="form-input" type="number" id="potencia" name="potencia"
               placeholder="Ej. 120"
               value="{{ (vehiculo['potencia'] or '') if vehiculo else request.form.get('potencia', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="combustible">Combustible</label>
        <input class="form-input" type="text" id="combustible" name="combustible"
               placeholder="Gasolina / Diésel / Eléctrico…"
               value="{{ (vehiculo['combustible'] or '') if vehiculo else request.form.get('combustible', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="neumaticos">Neumáticos</label>
        <input class="form-input" type="text" id="neumaticos" name="neumaticos"
               placeholder="Ej. 205/55 R16"
               value="{{ (vehiculo['neumaticos'] or '') if vehiculo else request.form.get('neumaticos', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="plazas">Plazas</label>
        <input class="form-input" type="text" id="plazas" name="plazas"
               placeholder="Nº de plazas"
               value="{{ (vehiculo['plazas'] or '') if vehiculo else request.form.get('plazas', '') }}">
      </div>

      <div class="form-group" style="width: 280px;">
        <label class="form-label"> </label>
        <label style="margin-top:22px;display:flex;align-items:center;gap:10px;cursor:pointer;
                      padding:10px 14px;background:var(--bg);border:1px solid var(--border);
                      border-radius:8px;transition:border-color .15s;"
              onmouseover="this.style.borderColor='var(--accent)'"
              onmouseout="this.style.borderColor='var(--border)'">
              
        <input type="checkbox" name="lanzadestellos" value="1"
         {% if vehiculo and vehiculo['lanzadestellos'] == 1 %}checked{% endif %}
        style="width:16px;height:16px;accent-color:var(--accent);cursor:pointer;">

          <span style="font-size:13px;color:var(--text)">Lanzadestellos</span>
          <span style="font-size:11px;color:var(--muted);margin-left:4px;">

            ({{ '✓ Con lanzadestellos' if vehiculo and vehiculo['lanzadestellos'] == 1 else '✗ Sin lanzadestellos' }})
          </span>
        </label>
      </div>
    </div>

{% if vehiculo %}
  {% set sit = vehiculo['situacion'] or '' %}
  {% if sit | upper == 'BAJA' %}
    {% set color_borde = '#f87171' %}
    {% set color_fondo = 'rgba(248,113,113,.08)' %}
  {% elif sit | upper == 'ACTIVO' %}
    {% set color_borde = '#34d399' %}
    {% set color_fondo = 'rgba(52,211,153,.08)' %}
  {% elif sit | upper == 'ALTA' %}
    {% set color_borde = '#60a5fa' %}
    {% set color_fondo = 'rgba(96,165,250,.08)' %}
  {% else %}
    {% set color_borde = 'var(--border)' %}
    {% set color_fondo = 'var(--pill-bg)' %}
  {% endif %}

  {% set estilo_sit = 'background:' ~ color_fondo ~ ';border:1.5px solid ' ~ color_borde ~ ';color:var(--text);font-weight:600;cursor: not-allowed;' %}

    {# ── SITUACIÓN Y DESTINO ── #}
    <div class="section-title">Situación y destino (No editable)</div>
    <div class="form-grid">

      <div class="form-group">
        <label class="form-label" for="situacion">Situación</label>
        <input class="form-input" type="text" id="situacion" name="situacion" style="{{ estilo_sit }}" readonly 
          value="{{ (vehiculo['situacion'] or '') if vehiculo else request.form.get('situacion', '') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="poblacion">Población</label>
        <input class="form-input" type="text" id="poblacion" name="poblacion" style="{{ estilo_sit }}" readonly
          value="{{ (vehiculo['poblacion'] or '') if vehiculo else request.form.get('poblacion','') }}">
      </div>

      <div class="form-group" style="width: 400px">
        <label class="form-label" for="unidad">Unidad</label>
        <input class="form-input" type="text" id="unidad" name="unidad"
          style="{{ estilo_sit }}" readonly
          value="{{ (vehiculo['unidad'] or '') if vehiculo else request.form.get('unidad','') }}">
      </div>

    </div>

    
    {# ── FECHAS Y KILOMETRAJE ── #}
    <div class="section-title">Kilometraje - ITV</div>
    <div class="form-grid">


      <div class="form-group">
        <label class="form-label" for="km">Km actuales</label>
        <input class="form-input" id="km" name="km"
          placeholder=""
          value="{{ (vehiculo['km'] or '') if vehiculo else request.form.get('km','') }}">

               <!-- value="{{ vehiculo['km'] if vehiculo else request.form.get('km','') }}"> -->
      </div>

      <div class="form-group">
        <label class="form-label" for="km_1">Km anterior</label>
        <input class="form-input" id="km_1" name="km_1"
          placeholder=""
          value="{{ (vehiculo['km_1'] or '') if vehiculo else request.form.get('km_1','') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="itv_ultima">Última ITV</label>
        <input class="form-input" type="date" id="itv_ultima" name="itv_ultima"
               value="{{ (vehiculo['itv_ultima'][:10] or '') if vehiculo and vehiculo['itv_ultima'] else request.form.get('itv_ultima','') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="itv">Próxima ITV</label>
        <input class="form-input" type="date" id="itv" name="itv"
               value="{{ (vehiculo['itv'][:10] or '') if vehiculo and vehiculo['itv'] else request.form.get('itv','') }}">
      </div>
    </div>

    {# ── NOTAS ── #}
    <div class="section-title">NOTAS</div>
      <div class="form-group" style="max-width: 1560px;">
        <!-- <textarea name="observaciones">{{ (vehiculo['observaciones'] or '') if vehiculo else '' }}</textarea> -->
        <textarea class="form-input" id="notas" name="notas"
          rows="5" placeholder="Notas adicionales…">{{ (vehiculo['notas'] or '') if vehiculo else request.form.get('notas','') }}
        </textarea>
      </div>
   

    {# ── DATOS INTERVENIDO ── #}
    <!-- {% set m_oficial = vehiculo['m_oficial'] if vehiculo else '' %} -->
    <div id="bloque-intervenido"
     style="display:{{ 'block' if m_oficial and m_oficial.strip().upper().endswith('Q') else 'none' }}">
      <div class="section-title" style="margin-top:28px">Datos vehículo intervenido</div>
      <div class="form-grid">

      <div class="form-group">
        <label class="form-label" for="int_operacion">Operacion</label>
        <input class="form-input" id="int_operacion" name="int_operacion"
               placeholder=""
               value="{{ (vehiculo['int_operacion'] or '') if vehiculo else request.form.get('int_operacion','') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="int_grupo">Grupo interviene</label>
        <input class="form-input" id="int_grupo" name="int_grupo"
               placeholder=""
               value="{{ (vehiculo['int_grupo'] or '') if vehiculo else request.form.get('int_grupo','') }}">
      </div>

      <div class="form-group">
      <label class="form-label" for="int_procedimiento">Diligencias</label>
      <input class="form-input" id="int_procedimiento" name="int_procedimiento"
              placeholder=""
              value="{{ (vehiculo['int_procedimiento'] or '') if vehiculo else request.form.get('int_procedimiento','') }}">
      </div>

      <div class="form-group">
        <label class="form-label" for="int_juzgado">Juzgado interviene</label>
        <input class="form-input" id="int_juzgado" name="int_juzgado"
               placeholder=""
               value="{{ (vehiculo['int_juzgado'] or '') if vehiculo else request.form.get('int_juzgado','') }}">
      </div>

    </div>
    
  </div>
{% endif %}

    <div class="form-actions" style="margin-top:28px">
      <button type="submit" class="btn btn-primary">
        {{ '💾 GUARDAR CAMBIOS' if vehiculo else '✚ Registrar vehículo' }}
      </button>

  {# Cancelar #}
  {% if origen == 'viat' %}
  <a href="/viat?q={{ q_viat }}" class="btn btn-ghost">Cancelar</a>
  {% elif desde or hasta or q_itv %}
  <a href="/itv?desde={{ desde }}&hasta={{ hasta }}&q_itv={{ q_itv }}" class="btn btn-ghost">Cancelar</a>
  {% else %}
  <a href="{{ url_for('vehiculos_list', q=q) if q else url_for('vehiculos_list') }}" class="btn btn-ghost">Cancelar</a>
  {% endif %}

<!-- <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;"> -->
{% if vehiculo %}
  <button type="button" class="btn btn-ghost" onclick="imprimirFicha()" title="Imprimir ficha del vehículo">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <polyline points="6 9 6 2 18 2 18 9"/>
      <path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/>
      <rect x="6" y="14" width="12" height="8"/>
    </svg>
    Ficha - Imprimir/PDF
  </button>
{% endif %}
<!-- </div> -->
  
</div>

</form>  {# ← CIERRE del formulario principal #}

<!-- {# Eliminar vehículo FUERA del form principal #}
{% if vehiculo %}
{% set nombre_vehiculo = vehiculo['m_oficial'] or vehiculo['tipo'] or '#' ~ vehiculo['id'] %} -->

<!-- QUITADO EL BOTON ELIMINAR -->
<!-- <form method="POST"
      action="{{ url_for('vehiculos_eliminar', id=vehiculo['id']) }}"
      style="margin-top:0px;display:flex;justify-content:flex-end;">
  <input type="hidden" name="_q" value="{{ q|default('') }}">
  <button type="button" class="btn btn-danger"
          onclick="confirmarEliminarVehiculo(this)">🗑 Eliminar vehículo</button>
</form> -->
<!-- {% endif %} -->



  {# ── HISTORIAL (fuera del form principal) ── #}
  {% if vehiculo %}
  <div class="section-title" style="margin-top:32px">Historial</div>

  {% if historial %}
  <div class="table-wrap" style="margin-bottom:20px;">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Fecha</th>
          <th>Matrícula</th>
          <th>Situación</th>
          <th>Poblacion</th>
          <th>Unidad</th>
          <th>Observaciones</th>
          <th style="text-align:right">Acción</th>
        </tr>
      </thead>
      <tbody>
        {% for h in historial %}
        <tr>
          <td class="td-id">{{ h['id'] or '—' }}</td>
          <td style="white-space:nowrap">{{ h['fecha'] | fecha_es }}</td>
          <!-- <td style="white-space:nowrap">{{ h['fecha'] or '—' }}</td> -->
          <td>{{ h['m_oficial'] or '—' }}</td>
          <td>{{ h['situacion'] or '—' }}</td>
          <td>{{ h['poblacion'] or '—' }}</td>
          <td>{{ h['unidad'] or '—' }}</td>
          <!-- <td>{{ h['grupo'] or '—' }}</td> -->
          <td style="color:var(--muted);font-size:12px">{{ h['observaciones'] or '—' }}</td>
          <td style="text-align:right">
            <form method="POST"
                  action="{{ url_for('historial_eliminar', vid=vehiculo['id'], hid=h['id']) }}">
              <input type="hidden" name="_q" value="{{ q|default('') }}">
              <input type="hidden" name="_desde"      value="{{ desde|default('') }}">
              <input type="hidden" name="_hasta"      value="{{ hasta|default('') }}">
              <input type="hidden" name="_unidad_itv" value="{{ unidad_itv|default('') }}">
              <button type="button" class="btn btn-danger btn-sm"
                      onclick="confirmarEliminar(this)">Eliminar</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p style="color:var(--muted);font-size:13px;margin-bottom:20px;">
    No hay entradas en el historial de este vehículo.
  </p>
  {% endif %}

  {# Formulario añadir entrada #}
  <div style="background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:20px;">
    <p style="font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
               color:var(--muted);margin-bottom:16px;">Añadir entrada al historial</p>

    <form method="POST" action="{{ url_for('historial_nuevo', vid=vehiculo['id']) }}">
      <input type="hidden" name="_q" value="{{ q|default('') }}">
      <input type="hidden" name="_desde"      value="{{ desde|default('') }}">
      <input type="hidden" name="_hasta"      value="{{ hasta|default('') }}">
      <input type="hidden" name="_unidad_itv" value="{{ unidad_itv|default('') }}">

      <div class="form-grid" style="margin-bottom:12px;">
        <div class="form-group" style="margin-bottom:0">
          <label class="form-label" for="h_fecha">Fecha</label>
          <input class="form-input" type="date" id="h_fecha" name="h_fecha" required> 
        </div>
        
          <input type='hidden' id="h_vehiculo_id" name="h_vehiculo_id" readonly
                 placeholder="" value="{{ vehiculo['id'] if vehiculo else request.form.get('id','') }}">
      
      <div class="form-group" style="margin-bottom:0">
        <label class="form-label" for="h_situacion">Situación</label>
        <div class="select-wrap">
          <select class="form-input form-select" id="h_situacion" name="h_situacion"
                  onchange="onSituacionChange(this.value)" required>
            <option value="">— Selecciona situación —</option>
            <option value="ACTIVO">ACTIVO</option>
            <!-- <option value="EN REPARACIÓN">EN REPARACIÓN</option> -->
            <option value="ALTA">ALTA</option>
            <option value="BAJA">BAJA</option>
          </select>
          <svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </div>
      </div>


        <div class="form-group" style="margin-bottom:0">
          <label class="form-label" for="h_poblacion">Población</label>
          <div class="select-wrap">
            <select class="form-input form-select" id="h_poblacion" name="h_poblacion"
                    onchange="cargarUnidades(this.value)" disabled>
              <option value="">— Selecciona población —</option>
              {% for p in poblaciones %}
              <option value="{{ p['id'] }}">{{ p['poblacion'] }}</option>
              {% endfor %}
            </select>
            <svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </div>
        </div>

        <div class="form-group col-2" style="margin-bottom:0">
          <label class="form-label" for="h_unidad">Unidad</label>
          <div class="select-wrap">
            <select class="form-input form-select" id="h_unidad" name="h_unidad" disabled>
              <option value="">— Primero selecciona población —</option>
            </select>
            <svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </div>
        </div>
       
        <div class="form-group col-full" style="margin-bottom:0">
          <label class="form-label" for="h_obs">Observaciones</label>
          <input class="form-input" type="text" id="h_obs" name="h_observaciones"
                 placeholder="Descripción…">
        </div>
      </div>
      <button type="submit" class="btn btn-primary btn-sm">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
        </svg>
        Añadir al historial
      </button>
    </form>
  </div>
  {% endif %}

</div> {# ← cierre de form-card #}




<script>

  function confirmarEliminar(btn) {
    if (confirm('¿Eliminar esta entrada del historial?')) {
      btn.closest('form').submit();
    }
  }

  function formatFecha(f) {
    if (!f) return '';
    // Si ya está en formato DD-MM-YYYY lo devuelve tal cual
    if (/^\d{2}-\d{2}-\d{4}$/.test(f)) return f;
    // Convertir YYYY-MM-DD a DD-MM-YYYY
    var partes = f.substring(0, 10).split('-');
    if (partes.length === 3) return partes[2] + '-' + partes[1] + '-' + partes[0];
    return f;
  }

  function fila(label, valor) {
    if (!valor) return '';
    return `<tr>
      <td style="font-weight:600;color:#555;padding:6px 12px;width:40%;border-bottom:1px solid #eee;font-size:11px;text-transform:uppercase;letter-spacing:.5px">${label}</td>
      <td style="padding:6px 12px;border-bottom:1px solid #eee;font-size:13px">${valor}</td>
    </tr>`;
  }

  function onSituacionChange(valor) {
    var selectPoblacion = document.getElementById('h_poblacion');
    var selectUnidad    = document.getElementById('h_unidad');
    var inputGrupo      = document.getElementById('h_grupo');
    var campSituacion   = document.getElementById('situacion');

    // Resetear desplegables dependientes
    selectPoblacion.value   = '';
    selectUnidad.innerHTML  = '<option value="">— Primero selecciona población —</option>';
    selectUnidad.disabled   = true;

    if (valor === 'ACTIVO') {
        // Solo ACTIVO habilita población y unidad
        selectPoblacion.disabled = false;
        inputGrupo.disabled = false;
      } 
    }

  function confirmarEliminarVehiculo(btn) {
    if (confirm('¿Eliminar el vehículo {{ nombre_vehiculo }}? Esta acción no se puede deshacer.')) {
      btn.closest('form').submit();
    }
  }


  function cargarUnidades(poblacionId) {
    var selectUnidad = document.getElementById('h_unidad');
    selectUnidad.innerHTML = '<option value="">— Cargando… —</option>';
    selectUnidad.disabled  = true;


    if (!poblacionId) {
      selectUnidad.innerHTML = '<option value="">— Primero selecciona población —</option>';
      return;
    }

    fetch('/api/unidades/' + poblacionId)
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.length === 0) {
          selectUnidad.innerHTML = '<option value="">— Sin unidades disponibles —</option>';
          return;
        }
        var opciones = '<option value="">— Selecciona unidad —</option>';
        data.forEach(function(u) {
          opciones += '<option value="' + u.unidad + '">' + u.unidad + '</option>';
        });
        selectUnidad.innerHTML = opciones;
        selectUnidad.disabled  = false;
      })
      .catch(function() {
        selectUnidad.innerHTML = '<option value="">— Error al cargar —</option>';
      });
    }

  function checkMatricula(valor) {
    var bloque = document.getElementById('bloque-intervenido');
    if (valor && valor.trim().toUpperCase().endsWith('Q')) {
      bloque.style.display = 'block';
    } else {
      bloque.style.display = 'none';
    }
  }
 
</script>

<script>
function imprimirFicha() {
  var v = {
    id:            '{{ vehiculo["id"] }}',
    m_oficial:     '{{ vehiculo["m_oficial"] or "" }}',
    m_civil:       '{{ vehiculo["m_civil"] or "" }}',
    m_propia:      '{{ vehiculo["m_propìa"] or "" }}',
    denominacion:  '{{ vehiculo["denominacion"] or "" }}',
    marca:         '{{ vehiculo["marca"] or "" }}',
    modelo:        '{{ vehiculo["modelo"] or "" }}',
    tipo:          '{{ vehiculo["tipo"] or "" }}',
    color:         '{{ vehiculo["color"] or "" }}',
    VIN:           '{{ vehiculo["VIN"] or "" }}',
    matricula:     '{{ vehiculo["numero_identificacion"] or "" }}',
    potencia:      '{{ vehiculo["potencia"] or "" }}',
    cilindrada:    '{{ vehiculo["cilindrada"] or "" }}',
    combustible:   '{{ vehiculo["combustible"] or "" }}',
    neumaticos:    '{{ vehiculo["neumaticos"] or "" }}',
    plazas:        '{{ vehiculo["plazas"] or "" }}',
    km:            '{{ vehiculo["km"] or "" }}',
    km_1:          '{{ vehiculo["km_1"] or "" }}',
    itv_ultima:    '{{ vehiculo["itv_ultima"] or "" }}',
    itv:           '{{ vehiculo["itv"] or "" }}',
    situacion:     '{{ vehiculo["situacion"] or "" }}',
    poblacion:     '{{ vehiculo["poblacion"] or "" }}',
    unidad:        '{{ vehiculo["unidad"] or "" }}',
    poliza:        '{{ vehiculo["poliza"] or "" }}',
    viat:          '{{ vehiculo["viat"] or "" }}',
  };

  var fecha = new Date().toLocaleDateString('es-ES');

  // Construir tabla de historial
  var historialRows = '';
  {% if historial %}
  {% for h in historial %}
    historialRows += `<tr>
      <td>${'{{ h["fecha"] | fecha_es }}' || '—'}</td>
      <td>${'{{ h["matricula"] or "—" }}'}</td>
      <td>${'{{ h["situacion"] or "—" }}'}</td>
      <td>${'{{ h["poblacion"] or "—" }}'}</td>
      <td>${'{{ h["unidad"] or "—" }}'}</td>
      <td>${'{{ h["grupo"] or "—" }}'}</td>
      <td style="color:#555">${'{{ h["observaciones"] or "—" }}'}</td>
    </tr>`;
  {% endfor %}
  {% endif %}

  var htmlHistorial = historialRows ? `
    <div class="section" style="margin-top:20px">
      <div class="section-title">Historial</div>
      <table>
        <thead>
          <tr>
            <th>Fecha</th>
            <th>Matrícula</th>
            <th>Situación</th>
            <th>Población</th>
            <th>Unidad</th>
            <th>Grupo</th>
            <th>Observaciones</th>
          </tr>
        </thead>
        <tbody>${historialRows}</tbody>
      </table>
    </div>` : '';

  var html = `<!DOCTYPE html><html><head><meta charset="UTF-8">
  <title>Ficha vehículo ${v.m_oficial}</title>
  <style>
    * { box-sizing:border-box; margin:0; padding:0; }
    body { font-family: Arial, sans-serif; color:#1a1d29; padding:24px; font-size:13px; }
    .header { display:flex; justify-content:space-between; align-items:flex-start;
              border-bottom:3px solid #5c6ef8; padding-bottom:16px; margin-bottom:20px; }
    .header h1 { font-size:20px; color:#5c6ef8; margin-bottom:4px; }
    .header .meta { font-size:11px; color:#888; }
    .badge { background:#5c6ef8; color:#fff; font-size:11px; font-weight:700;
             padding:3px 10px; border-radius:20px; display:inline-block; margin-top:6px; }
    .badge.baja { background:#ef4444; }
    .badge.activo { background:#10b981; }
    .section { margin-bottom:20px; }
    .section-title { font-size:10px; font-weight:700; letter-spacing:1px;
                     text-transform:uppercase; color:#5c6ef8;
                     border-bottom:1px solid #5c6ef8; padding-bottom:4px;
                     margin-bottom:8px; }
    table { width:100%; border-collapse:collapse; }
    .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    /* Tabla historial ocupa ancho completo */
    .section table th {
      background:#5c6ef8; color:#fff; padding:5px 8px;
      text-align:left; font-size:9px; letter-spacing:.5px;
    }
    .section table td {
      padding:5px 8px; border-bottom:1px solid #eee; font-size:10px;
    }
    .section table tr:nth-child(even) td { background:#f5f6fa; }
    /* Filas datos vehículo */
    .data-table td:first-child {
      font-weight:600; color:#555; width:40%;
      font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    }
    .data-table td { padding:6px 12px; border-bottom:1px solid #eee; font-size:13px; }
    .footer { margin-top:24px; font-size:10px; color:#aaa;
              text-align:center; border-top:1px solid #eee; padding-top:12px; }
    @media print {
      body { padding:12px; }
      @page { margin:1.5cm; size: A4; }
    }
  </style>
  </head><body>

  <div class="header">
    <div>
      <div class="meta">Ficha de vehículo · ID #${v.id}</div>
      <h1>${v.m_oficial || v.denominacion || 'Sin matrícula'}</h1>
      <h3 class="badge ${v.situacion === 'ALTA' ? 'alta' : v.situacion === 'BAJA' ? 'baja' : v.situacion === 'ACTIVO' ? 'activo' : ''}">
        ${v.situacion || 'Sin situación'}
      </h3>
    </div>
    <div style="text-align:right">
      <div class="meta">Generado el ${fecha}</div>
      <div style="font-size:18px;font-weight:700;margin-top:8px">${v.marca} ${v.modelo}</div>
      <div class="meta">${v.denominacion}</div>
    </div>
  </div>

  <div class="grid">
    <div>
      <div class="section">
        <div class="section-title">Identificación</div>
        <table class="data-table">
          ${fila('M. oficial', v.m_oficial)}
          ${fila('M. civil', v.m_civil)}
          ${fila('M. propia', v.m_propia)}
          ${fila('VIN', v.VIN)}
          ${fila('Denominación', v.denominacion)}
        </table>
      </div>
      <div class="section">
        <div class="section-title">Características técnicas</div>
        <table class="data-table">
          ${fila('Marca', v.marca)}
          ${fila('Modelo', v.modelo)}
          ${fila('Tipo', v.tipo)}
          ${fila('Color', v.color)}
          ${fila('Cilindrada', v.cilindrada)}
          ${fila('Potencia', v.potencia ? v.potencia + ' CV' : '')}
          ${fila('Combustible', v.combustible)}
          ${fila('Neumáticos', v.neumaticos)}
          ${fila('Plazas', v.plazas)}
        </table>
      </div>
    </div>
    <div>
      <div class="section">
        <div class="section-title">Situación y destino</div>
        <table class="data-table">
          ${fila('Situación', v.situacion)}
          ${fila('Población', v.poblacion)}
          ${fila('Unidad', v.unidad)}
        </table>
      </div>
      <div class="section">
        <div class="section-title">ITV y kilometraje</div>
        <table class="data-table">
          ${fila('Km actuales', v.km)}
          ${fila('Próxima ITV', formatFecha(v.itv))}
          
        </table>
      </div>
      <div class="section">
        <div class="section-title">Otros datos</div>
        <table class="data-table">
          ${fila('Póliza', v.poliza)}
          ${fila('Via-T', v.viat)}
        </table>
      </div>
    </div>
  </div>

  ${htmlHistorial}


  </body></html>`;

  var win = window.open('', '_blank', 'width=1000,height=750');
  win.document.write(html);
  win.document.close();
  win.focus();
  setTimeout(function() { win.print(); }, 400);
}
</script>

{% endblock %}