@extends('layouts.app')

@section('title', 'Calculadora de alcohol')

@section('content')

<style>
    .abv-wrap { max-width:560px; }
    .abv-seg { display:inline-flex; gap:4px; padding:4px; background:var(--paper-2,#f1ece3); border-radius:12px; }
    .abv-seg input { position:absolute; opacity:0; pointer-events:none; }
    .abv-seg label { cursor:pointer; padding:7px 16px; border-radius:9px; font:600 .85rem var(--font-sans); color:var(--text-muted,#8a7a66); }
    .abv-seg input:checked + label { background:#fff; color:var(--text-primary,#1b1b1b); box-shadow:var(--shadow-xs,0 1px 2px rgba(0,0,0,.06)); }
    .abv-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
    .abv-hint { font-size:.78rem; color:var(--text-muted,#8a7a66); margin-top:4px; }

    .abv-result { margin-top:22px; }
    .abv-big { font:800 3rem/1 var(--font-data,var(--font-sans)); color:var(--green-700,#2f6d1c); }
    .abv-big small { font-size:1.1rem; font-weight:700; opacity:.7; }
    .abv-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font:700 .8rem var(--font-sans); }
    .abv-badge--non_alcoholic { background:var(--green-050,#eaf6e4); color:var(--green-700,#2f6d1c); }
    .abv-badge--low_alcohol   { background:var(--gold-100,#faedcf); color:var(--gold-700,#9a6b12); }
    .abv-badge--alcoholic     { background:#fbe3d8; color:var(--rust-600,#b5441c); }
    .abv-metrics { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
    .abv-metric { flex:1; min-width:120px; padding:12px 14px; background:var(--paper-1,#faf6ef); border:1px solid var(--border-subtle,#ece2d4); border-radius:12px; }
    .abv-metric__k { font:600 10px/1.2 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted,#8a7a66); }
    .abv-metric__v { font:700 1.15rem var(--font-data,var(--font-sans)); color:var(--text-primary,#1b1b1b); margin-top:3px; }

    /* Mobile: stack the inputs, full-width method toggle, smaller hero number. */
    @media (max-width:480px) {
        .abv-seg { display:flex; width:100%; }
        .abv-seg label { flex:1; text-align:center; }
        .abv-fields { grid-template-columns:1fr; gap:12px; }
        .abv-big { font-size:2.4rem; }
        .abv-metric { min-width:0; }
    }

    .abv-help summary { cursor:pointer; font:700 .85rem var(--font-sans); color:var(--green-700,#2f6d1c); display:flex; align-items:center; gap:8px; list-style:none; }
    .abv-help summary::-webkit-details-marker { display:none; }
    .abv-help p { margin:0 0 10px; font-size:.85rem; line-height:1.55; color:var(--text-secondary,#4a4a4a); }
    .abv-help p:last-child { margin-bottom:0; }
    .abv-help[open] summary { margin-bottom:12px; }
</style>

@php
    $method = old('method', $input['method'] ?? 'brix');
    $labels = [
        'sg'   => ['initial' => 'Densidad inicial (OG)', 'final' => 'Densidad final (FG)', 'hint' => 'Ej.: densidad inicial 1.050 → densidad final 1.010.'],
        'brix' => ['initial' => '°Brix inicial',          'final' => '°Brix final',          'hint' => 'Ej.: 6 °Brix inicial → 4 °Brix final.'],
    ];
    $lbl = $labels[$method] ?? $labels['brix'];
@endphp

<div class="mb-2">
    <a href="{{ route('laboratorio.index') }}" class="btn-back" onclick="event.preventDefault(); history.back();">← Volver</a>
</div>

<div class="abv-wrap">
    <div class="page-title">Calculadora de alcohol</div>
    <p class="page-subtitle">Estima el % de alcohol (ABV) a partir de tus lecturas de densidad o Brix.</p>

    <details class="fermenty-card abv-help">
        <summary><i class="fa-solid fa-circle-question"></i> ¿Cómo mido esto?</summary>
        <p>El alcohol se produce cuando la levadura o el cultivo consume el azúcar del mosto. Al comparar cuánto ha bajado la densidad o el Brix entre el principio y el final, calculamos cuánto alcohol se ha generado.</p>
        <p><strong>Densidad (SG)</strong>: se mide con un densímetro (hidrómetro), un flotador de cristal que se sumerge en el líquido — el número donde queda a flote es la lectura. El agua sola marca 1.000; el azúcar disuelto la sube.</p>
        <p><strong>Brix</strong>: se mide con un refractómetro — una gota del líquido sobre el prisma, y lees el grado a contraluz por el visor. Es más rápido y necesita menos cantidad de muestra que el densímetro.</p>
        <p><strong>Cuándo tomar cada lectura</strong>: la inicial, con el mosto recién preparado, antes de añadir la levadura/cultivo. La final, cuando creas que ha terminado de fermentar (la lectura deja de bajar 2-3 días seguidos).</p>
    </details>

    <form method="POST" action="{{ route('tools.alcohol.calculate') }}" class="fermenty-card" id="abvForm">
        @csrf

        <div class="abv-seg" role="group" aria-label="Método de medición">
            <input type="radio" name="method" id="m-sg"   value="sg"   {{ $method === 'sg' ? 'checked' : '' }}>
            <label for="m-sg">Densidad (SG)</label>
            <input type="radio" name="method" id="m-brix" value="brix" {{ $method === 'brix' ? 'checked' : '' }}>
            <label for="m-brix">Brix</label>
        </div>

        <div class="abv-fields">
            <div>
                <label class="form-label" id="lbl-initial" for="initial">{{ $lbl['initial'] }}</label>
                <input type="number" step="any" inputmode="decimal" name="initial" id="initial"
                       class="form-control @error('initial') is-invalid @enderror"
                       value="{{ old('initial', $input['initial'] ?? '6') }}" required>
            </div>
            <div>
                <label class="form-label" id="lbl-final" for="final">{{ $lbl['final'] }}</label>
                <input type="number" step="any" inputmode="decimal" name="final" id="final"
                       class="form-control @error('final') is-invalid @enderror"
                       value="{{ old('final', $input['final'] ?? '4') }}" required>
            </div>
        </div>
        <div class="abv-hint" id="abv-hint">{{ $lbl['hint'] }}</div>

        @if($errors->any())
            <div class="text-danger mt-2" style="font-size:.82rem;">{{ $errors->first() }}</div>
        @endif

        <button type="submit" class="btn btn-fermenty-primary mt-3">Calcular</button>
    </form>

    @if($result)
        @php $c = $result->compliance(); @endphp
        <div class="fermenty-card abv-result">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                <div>
                    <div class="abv-big">{{ number_format($result->abv, 2) }}<small>% vol</small></div>
                    <div class="text-muted" style="font-size:.78rem;">
                        Método: {{ $result->method === 'brix' ? 'Brix' : 'Densidad (SG)' }}
                        · {{ $result->calculatedAt->format('d/m/Y H:i') }}
                    </div>
                </div>
                <span class="abv-badge abv-badge--{{ $c['status'] }}">
                    <i class="fa-solid fa-circle-info"></i> {{ $c['label'] }}
                </span>
            </div>

            <div class="abv-metrics">
                @if($result->attenuation !== null)
                    <div class="abv-metric">
                        <div class="abv-metric__k">Atenuación</div>
                        <div class="abv-metric__v">{{ number_format($result->attenuation, 1) }}%</div>
                    </div>
                @endif
                <div class="abv-metric">
                    <div class="abv-metric__k">Azúcar consumido</div>
                    <div class="abv-metric__v">{{ number_format($result->sugarConsumedGl, 0) }} g/L</div>
                </div>
            </div>

            <p class="abv-hint mt-3">
                Clasificación según el etiquetado UE 1169/2011 · REGLAE:
                &lt; 0,5 % sin alcohol · 0,5–1,2 % bajo en alcohol · ≥ 1,2 % alcohólico.
                El azúcar consumido es una estimación (~17 g/L por cada 1 % vol).
            </p>
        </div>
    @endif
</div>

@push('scripts')
<script>
(function () {
    var labels = {
        sg:   { initial: 'Densidad inicial (OG)', final: 'Densidad final (FG)', hint: 'Ej.: densidad inicial 1.050 → densidad final 1.010.', p0: '1.050', p1: '1.010' },
        brix: { initial: '°Brix inicial',          final: '°Brix final',          hint: 'Ej.: 6 °Brix inicial → 4 °Brix final.',                 p0: '6',     p1: '4' }
    };
    var lblI = document.getElementById('lbl-initial');
    var lblF = document.getElementById('lbl-final');
    var hint = document.getElementById('abv-hint');
    var inI  = document.getElementById('initial');
    var inF  = document.getElementById('final');

    function apply(m) {
        var l = labels[m] || labels.sg;
        lblI.textContent = l.initial; lblF.textContent = l.final; hint.textContent = l.hint;
        inI.placeholder = l.p0; inF.placeholder = l.p1;
    }
    document.querySelectorAll('input[name="method"]').forEach(function (r) {
        r.addEventListener('change', function () { if (this.checked) apply(this.value); });
    });
    var checked = document.querySelector('input[name="method"]:checked');
    apply(checked ? checked.value : 'sg');
})();
</script>
@endpush

@endsection