{{-- Conversor de unidades — dentro del laboratorio, no en las herramientas
     públicas. Resuelve el problema real de traducir recetas anglosajonas:
     cups, cucharadas, onzas y libras a gramos, mililitros y grados Celsius.

     Con una honestidad que el proyecto sí puede permitirse: una cucharada de
     sal no pesa lo mismo según el grano, y una «cup» no mide igual en EE. UU.
     que en Europa. Por eso el conversor da el número Y dice cuándo no fiarse. --}}
@extends('layouts.app')

@section('title', 'Conversor de unidades')

@section('content')
<style>
  .cnv-wrap { max-width: 780px; }
  .cnv-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .cnv-tab { cursor:pointer; font:600 .88rem var(--font-sans,inherit); padding:8px 15px; border:1px solid #ece2d4; border-radius:999px; background:#fff; color:#6b5c48; }
  .cnv-tab.is-on { background:#2f6d1c; border-color:#2f6d1c; color:#fff; }
  .cnv-panel { display:none; }
  .cnv-panel.is-on { display:block; }
  .cnv-row { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:end; }
  .cnv-eq { padding-bottom:12px; font-weight:700; color:#8a7a66; }
  .cnv-field label { display:block; font-size:.82rem; font-weight:600; color:#6b5c48; margin-bottom:5px; }
  .cnv-field input, .cnv-field select { width:100%; padding:.65rem .8rem; border:1px solid #e6dccb; border-radius:10px; background:#fff; font:inherit; }
  .cnv-out { margin-top:18px; background:#F4F9F1; border:1px solid #D8E8CF; border-radius:14px; padding:16px 18px; }
  .cnv-out__num { font-family:'Comfortaa',sans-serif; font-weight:700; font-size:1.8rem; color:#1B241D; line-height:1.15; }
  .cnv-out__help { font-size:.83rem; color:#6b5c48; margin-top:4px; }
  .cnv-aviso { font-size:.83rem; color:#8a7a66; line-height:1.6; margin-top:14px; border-top:1px dashed #e6dccb; padding-top:12px; }
  .cnv-tabla { width:100%; border-collapse:collapse; font-size:.88rem; margin-top:10px; }
  .cnv-tabla th, .cnv-tabla td { text-align:left; padding:7px 9px; border-bottom:1px solid #f0e9dc; }
  .cnv-tabla th { color:#3E6B2E; font-weight:700; }
  @media (max-width:640px){ .cnv-row { grid-template-columns:1fr; } .cnv-eq { display:none; } }
</style>

<div class="container py-4 cnv-wrap">

  <div class="mb-3"><a href="{{ route('laboratorio.index') }}" class="btn-back">← Laboratorio</a></div>

  <div class="page-title">Conversor de unidades</div>
  <p class="page-subtitle">Para cuando la receta viene en cups, onzas o Fahrenheit y tú fermentas en gramos, litros y grados Celsius.</p>

  <div class="cnv-tabs" role="tablist">
    <button type="button" class="cnv-tab is-on" data-panel="cocina">Medidas de cocina → gramos</button>
    <button type="button" class="cnv-tab" data-panel="peso">Peso</button>
    <button type="button" class="cnv-tab" data-panel="volumen">Volumen</button>
    <button type="button" class="cnv-tab" data-panel="temp">Temperatura</button>
  </div>

  {{-- 1 · Lo más útil: una medida de cocina de un ingrediente concreto, en gramos --}}
  <div class="cnv-panel is-on" id="p-cocina">
    <div class="fermenty-card">
      <div class="cnv-row">
        <div class="cnv-field">
          <label for="cocCant">Cuánto</label>
          <input type="number" id="cocCant" value="1" step="any" min="0">
        </div>
        <div class="cnv-eq">de</div>
        <div class="cnv-field">
          <label for="cocMedida">Medida</label>
          <select id="cocMedida">
            <option value="tsp">cucharadita (tsp) — 5 ml</option>
            <option value="tbsp">cucharada (tbsp) — 15 ml</option>
            <option value="cup_us" selected>cup estadounidense — 240 ml</option>
            <option value="cup_eu">taza métrica — 250 ml</option>
            <option value="floz">onza líquida (fl oz) — 29,6 ml</option>
            <option value="ml">mililitro</option>
          </select>
        </div>
      </div>
      <div class="cnv-row" style="margin-top:12px">
        <div class="cnv-field" style="grid-column:1 / -1">
          <label for="cocIng">De qué</label>
          <select id="cocIng"></select>
        </div>
      </div>

      <div class="cnv-out" aria-live="polite">
        <div class="cnv-out__num" id="cocOut">240 g</div>
        <div class="cnv-out__help" id="cocHelp"></div>
      </div>

      <p class="cnv-aviso" id="cocAviso"></p>
    </div>

    <div class="fermenty-card mt-3">
      <div class="card-title">Lo que conviene saber antes de fiarte</div>
      <p style="font-size:.9rem;color:#5a4a38;margin-bottom:10px">
        Una cucharada de sal puede pesar de 6 a 18 gramos según el grano: la sal fina se compacta y la escamosa deja aire.
        En un fermento, esa diferencia es la que separa un chucrut crujiente de uno blando — <strong>la sal se pesa siempre</strong>.
        Estas conversiones sirven para leer una receta ajena, no para sustituir la báscula.
      </p>
      <table class="cnv-tabla">
        <thead><tr><th>Sal</th><th>1 cucharadita</th><th>1 cucharada</th></tr></thead>
        <tbody>
          <tr><td>Fina (de mesa)</td><td>≈ 6 g</td><td>≈ 18 g</td></tr>
          <tr><td>Marina gruesa</td><td>≈ 5 g</td><td>≈ 15 g</td></tr>
          <tr><td>En escamas</td><td>≈ 3 g</td><td>≈ 9 g</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  {{-- 2 · Peso --}}
  <div class="cnv-panel" id="p-peso">
    <div class="fermenty-card">
      <div class="cnv-row">
        <div class="cnv-field">
          <label for="pesoCant">Cantidad</label>
          <input type="number" id="pesoCant" value="1" step="any" min="0">
        </div>
        <div class="cnv-eq">→</div>
        <div class="cnv-field">
          <label for="pesoUnidad">Unidad de origen</label>
          <select id="pesoUnidad">
            <option value="oz">onza (oz)</option>
            <option value="lb" selected>libra (lb / pound)</option>
            <option value="g">gramo</option>
            <option value="kg">kilogramo</option>
          </select>
        </div>
      </div>
      <div class="cnv-out" aria-live="polite">
        <div class="cnv-out__num" id="pesoOut"></div>
        <div class="cnv-out__help" id="pesoHelp"></div>
      </div>
    </div>
  </div>

  {{-- 3 · Volumen --}}
  <div class="cnv-panel" id="p-volumen">
    <div class="fermenty-card">
      <div class="cnv-row">
        <div class="cnv-field">
          <label for="volCant">Cantidad</label>
          <input type="number" id="volCant" value="1" step="any" min="0">
        </div>
        <div class="cnv-eq">→</div>
        <div class="cnv-field">
          <label for="volUnidad">Unidad de origen</label>
          <select id="volUnidad">
            <option value="tsp">cucharadita (tsp)</option>
            <option value="tbsp">cucharada (tbsp)</option>
            <option value="floz">onza líquida (fl oz)</option>
            <option value="cup_us" selected>cup estadounidense</option>
            <option value="pint">pinta EE. UU. (pint)</option>
            <option value="quart">cuarto EE. UU. (quart)</option>
            <option value="gallon">galón EE. UU. (gallon)</option>
            <option value="ml">mililitro</option>
            <option value="l">litro</option>
          </select>
        </div>
      </div>
      <div class="cnv-out" aria-live="polite">
        <div class="cnv-out__num" id="volOut"></div>
        <div class="cnv-out__help" id="volHelp"></div>
      </div>
      <p class="cnv-aviso">Las pintas y los galones británicos no son los de EE. UU. (una pinta imperial son 568 ml). Si la receta es de Reino Unido, comprueba el origen antes de dar el volumen por bueno.</p>
    </div>
  </div>

  {{-- 4 · Temperatura --}}
  <div class="cnv-panel" id="p-temp">
    <div class="fermenty-card">
      <div class="cnv-row">
        <div class="cnv-field">
          <label for="tempCant">Temperatura</label>
          <input type="number" id="tempCant" value="72" step="any">
        </div>
        <div class="cnv-eq">→</div>
        <div class="cnv-field">
          <label for="tempUnidad">Escala de origen</label>
          <select id="tempUnidad">
            <option value="F" selected>Fahrenheit (°F)</option>
            <option value="C">Celsius (°C)</option>
          </select>
        </div>
      </div>
      <div class="cnv-out" aria-live="polite">
        <div class="cnv-out__num" id="tempOut"></div>
        <div class="cnv-out__help" id="tempHelp"></div>
      </div>
      <p class="cnv-aviso">Las recetas anglosajonas suelen decir «room temperature» para 68-72 °F, que son 20-22 °C. Si tu cocina está más caliente, tu fermento va más rápido que la receta.</p>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
  /* Volúmenes en ml. Las «cups» no son universales: la de EE. UU. son 240 ml y
     la métrica europea 250 — se ofrecen las dos porque la receta no siempre dice
     de dónde viene. */
  var VOL = { tsp: 4.93, tbsp: 14.79, floz: 29.57, cup_us: 240, cup_eu: 250,
              pint: 473.18, quart: 946.35, gallon: 3785.41, ml: 1, l: 1000 };
  var PESO = { oz: 28.35, lb: 453.59, g: 1, kg: 1000 };

  /* Densidades aparentes (g/ml) de lo que se usa fermentando. Aparentes, no
     reales: incluyen el aire entre granos, que es justo lo que hace que una
     cucharada de sal no pese siempre lo mismo. */
  var ING = [
    { slug: 'agua',        nombre: 'Agua o té',                d: 1.00 },
    { slug: 'sal_fina',    nombre: 'Sal fina de mesa',         d: 1.20, aviso: 'La sal fina se compacta: pesa casi el doble que la escamosa a igual volumen. Pésala.' },
    { slug: 'sal_marina',  nombre: 'Sal marina gruesa',        d: 1.00, aviso: 'El grano gruso deja huecos, así que el volumen engaña. Pésala.' },
    { slug: 'sal_escamas', nombre: 'Sal en escamas',           d: 0.60, aviso: 'Las escamas son casi aire: una cucharada puede pesar un tercio que la de sal fina. Pésala.' },
    { slug: 'azucar',      nombre: 'Azúcar blanco',            d: 0.85 },
    { slug: 'azucar_mor',  nombre: 'Azúcar moreno (prensado)', d: 0.93 },
    { slug: 'panela',      nombre: 'Panela rallada',           d: 0.80 },
    { slug: 'miel',        nombre: 'Miel',                     d: 1.42, aviso: 'La miel se mide mejor en peso: lo que queda pegado en la taza no es poco.' },
    { slug: 'harina',      nombre: 'Harina de trigo',          d: 0.55, aviso: 'Según se llene la taza, la harina varía hasta un 20 %. Es el clásico de la masa madre.' },
    { slug: 'te_hojas',    nombre: 'Té en hoja',               d: 0.25, aviso: 'El té en hoja es muy ligero y su densidad depende del corte: el peso es el único dato fiable.' },
    { slug: 'copos',       nombre: 'Copos de chile (gochugaru)', d: 0.42 }
  ];

  var $ = function (id) { return document.getElementById(id); };
  function n(v, dec) { return v.toLocaleString('es-ES', { maximumFractionDigits: dec === undefined ? 1 : dec }); }

  /* pestañas */
  document.querySelectorAll('.cnv-tab').forEach(function (t) {
    t.addEventListener('click', function () {
      document.querySelectorAll('.cnv-tab').forEach(function (x) { x.classList.remove('is-on'); });
      document.querySelectorAll('.cnv-panel').forEach(function (x) { x.classList.remove('is-on'); });
      t.classList.add('is-on');
      $('p-' + t.dataset.panel).classList.add('is-on');
    });
  });

  /* 1 · medida de cocina → gramos */
  var sel = $('cocIng');
  ING.forEach(function (i) {
    var o = document.createElement('option');
    o.value = i.slug; o.textContent = i.nombre;
    sel.appendChild(o);
  });
  sel.value = 'sal_fina';

  function cocina() {
    var cant = parseFloat($('cocCant').value) || 0;
    var ml = cant * VOL[$('cocMedida').value];
    var ing = ING.filter(function (i) { return i.slug === sel.value; })[0];
    var g = ml * ing.d;
    $('cocOut').textContent = n(g) + ' g';
    $('cocHelp').textContent = n(ml) + ' ml de ' + ing.nombre.toLowerCase() + ' · densidad aparente ' + n(ing.d, 2) + ' g/ml';
    $('cocAviso').textContent = ing.aviso || 'Conversión aproximada: el volumen de un sólido depende de cómo se llene la medida.';
  }
  ['cocCant', 'cocMedida', 'cocIng'].forEach(function (id) { $(id).addEventListener('input', cocina); });
  $('cocMedida').addEventListener('change', cocina);
  sel.addEventListener('change', cocina);

  /* 2 · peso */
  function peso() {
    var g = (parseFloat($('pesoCant').value) || 0) * PESO[$('pesoUnidad').value];
    $('pesoOut').textContent = g >= 1000 ? n(g / 1000, 3) + ' kg' : n(g) + ' g';
    $('pesoHelp').textContent = n(g) + ' g · ' + n(g / 28.35) + ' oz · ' + n(g / 453.59, 2) + ' lb';
  }
  ['pesoCant', 'pesoUnidad'].forEach(function (id) { $(id).addEventListener('input', peso); });
  $('pesoUnidad').addEventListener('change', peso);

  /* 3 · volumen */
  function volumen() {
    var ml = (parseFloat($('volCant').value) || 0) * VOL[$('volUnidad').value];
    $('volOut').textContent = ml >= 1000 ? n(ml / 1000, 2) + ' L' : n(ml) + ' ml';
    $('volHelp').textContent = n(ml) + ' ml · ' + n(ml / 240, 2) + ' cups EE. UU. · ' + n(ml / 14.79) + ' cucharadas';
  }
  ['volCant', 'volUnidad'].forEach(function (id) { $(id).addEventListener('input', volumen); });
  $('volUnidad').addEventListener('change', volumen);

  /* 4 · temperatura */
  function temp() {
    var v = parseFloat($('tempCant').value);
    if (isNaN(v)) { $('tempOut').textContent = '—'; $('tempHelp').textContent = ''; return; }
    if ($('tempUnidad').value === 'F') {
      var c = (v - 32) * 5 / 9;
      $('tempOut').textContent = n(c) + ' °C';
      $('tempHelp').textContent = n(v) + ' °F equivalen a ' + n(c) + ' °C';
    } else {
      var f = v * 9 / 5 + 32;
      $('tempOut').textContent = n(f) + ' °F';
      $('tempHelp').textContent = n(v) + ' °C equivalen a ' + n(f) + ' °F';
    }
  }
  ['tempCant', 'tempUnidad'].forEach(function (id) { $(id).addEventListener('input', temp); });
  $('tempUnidad').addEventListener('change', temp);

  cocina(); peso(); volumen(); temp();
})();
</script>
@endpush