{% extends "base.html" %}
{% block title %}Unidades{% endblock %}
{% block content %}

<style>
html[data-theme="light"],
html[data-theme="light"] body {
    background: #f5f6fa;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #0a111f;
}
</style>

<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-icons/bootstrap-icons.css') }}">

<style>
  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
}

.nav-links > a {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    line-height: normal !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}
</style>

<div class="page-header">
  <div class="page-eyebrow">Configuración</div>
  <div class="page-title"><i class="bi bi-building"></i> Unidades</div>
  <div class="page-subtitle">Gestiona los unidades a las que se asignan los vehículos.</div>
</div>

<div style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;">

  {# Formulario añadir #}
  <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:400px;">
    <p class="form-label" style="margin-bottom:14px;">Nueva unidad</p>
    <form method="POST" action="{{ url_for('unidades_nueva') }}">
      <div class="form-group">
        <label class="form-label">Población</label>
        <div class="select-wrap">
          <select class="form-input form-select" name="poblacion_id" required>
            <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">
        <label class="form-label">Unidad</label>
        <input class="form-input" type="text" name="unidad"
               placeholder="Nombre de la unidad" required>
      </div>
      <button type="submit" class="btn btn-sm btn-primary" style="width:50%;margin-top:12px; display: block; margin-left: auto; margin-right: auto;">
        ✚ Añadir
      </button>
    </form>
  </div>

  {# Listado #}
  <div style="flex:1;min-width:320px;max-width: 800px;">
  <!-- <div style="flex:1;min-width:320px;"> -->

    {# Buscador #}
    <div class="search-wrap" style="margin-bottom:16px;max-width:100%">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <input type="text" id="searchUnidades" 
             placeholder="Buscar por población o unidad…"
             autocomplete="off"
             autofocus
             style="padding-right:32px; width: 500px;">
      <button type="button" id="clearSearch"
              style="display:none;position:absolute;right:325px;top:50%;
                     transform:translateY(-50%);background:none;border:none;
                     cursor:pointer;color:var(--muted);padding:4px;align-items:center;z-index:2;"
              onmouseover="this.style.color='var(--text)'"
              onmouseout="this.style.color='var(--muted)'">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.5" style="pointer-events:none;display:block;">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </div>

    <p id="contador" style="margin-top:8px;font-size:12px;color:var(--muted)">
      {{ rows|length }} unidades
    </p>
    
    <div class="table-wrap">
      <table id="tabla">
        <thead>
          <tr>
            <th hidden>ID</th>
            <th>Población</th>
            <th>Unidad</th>
          </tr>
        </thead>
        <tbody id="tbodyUnidades">
          {% for r in rows %}
          {% set nombre_uni = r['unidad'] %}
          <tr class="border-bottom">
            <td hidden class="td-id">{{ r['id'] }}</td>
            <td><strong>{{ r['poblacion'] or '—' }}</strong></td>
            <td><strong>{{ r['unidad'] }}</strong></td>
          </tr>
          {% else %}
          <tr id="sinDatos">
            <td colspan="4"><div class="empty-state">Sin unidades registradas.</div></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
  </div>
</div>

<script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/tabledit.min.js') }}"></script>



<script>
  var input    = document.getElementById('searchUnidades');
  var clearBtn = document.getElementById('clearSearch');
  var contador = document.getElementById('contador');

  input.addEventListener('input', function() {
    clearBtn.style.display = this.value ? 'flex' : 'none';
    filtrar(this.value.trim().toLowerCase());
  });

  clearBtn.addEventListener('click', function() {
    input.value = '';
    this.style.display = 'none';
    input.focus();
    filtrar('');
  });

  function filtrar(q) {
    var filas    = document.querySelectorAll('#tbodyUnidades tr');
    var visibles = 0;
    filas.forEach(function(tr) {
      var texto   = tr.innerText.toLowerCase();
      var mostrar = !q || texto.indexOf(q) !== -1;
      tr.style.display = mostrar ? '' : 'none';
      if (mostrar) visibles++;
    });
    contador.textContent = visibles + ' unidad' + (visibles !== 1 ? 'es' : '')
      + (q ? ' — filtrado por «' + q + '»' : '');
  }
</script>



<script>
$('#tabla').Tabledit({
    url:'/editar_unidades',

    editButton:true,
    deleteButton:false,
    restoreButton:false,
    hideIdentifier:false,

    buttons:{
        edit:{
            class:'btn btn-light btn-sm border-secondary rounded me-1 ',
            html:'<i class="bi bi-pencil"></i>'
        },
        // delete:{
        //     class:'btn btn-sm btn-light text-danger border me-1',
        //     html:'<i class="bi bi-trash"></i>'
        //     // html:'Borrar'
        // },
        save:{
            class:'btn btn-sm btn-success',
            html:'Guardar'
        },
        confirm:{
            class:'btn btn-sm btn-warning',
            html:'¿Seguro?'
        }
    },

    columns:{
        identifier:[0,'id'],
        editable:[
            [1,'poblacion'],
            [2,'unidad'],
        ]

    },

    onSuccess:function(data){
        if (data.action == "edit") {
            location.reload();
        }

        if (data.action == "delete") {
            location.reload();
        }
    
    console.log(data);
    }  
});

$('#tabla td:last-child').attr(
    'style',
    'white-space: nowrap; width:170px;'
);
</script>


{% endblock %}